Watch your back, Browser! You're being observed.

Watch your back, Browser! You're being observed. @stefanjudis

Stefan Judis Frontend Developer, Occasional Teacher, Meetup Organizer ❤ Open
Source, Performance and Accessibility ❤ @stefanjudis

I'm excited about conferences and meetups

The web platform evolves really fast these days

Staying up to date is part of our job

JavaScript Ecosystem

Browser APIs adapt common use cases

Browser APIs adapt common use cases pull

Browser APIs adapt common use cases pull push

Let's celebrate!

codepen.io/thebabydino/pen/RRRRZE

function isElementInViewport (el) { var rect = el.getBoundingClientRect(); return (
rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } How to tell if a DOM element is visible in the current viewport? stackoverﬂow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

function isElementInViewport (el) { var rect = el.getBoundingClientRect(); // can
trigger force layout/reflow return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } How to tell if a DOM element is visible in the current viewport? stackoverﬂow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

WHAT FORCES LAYOUT / REFLOW gist.github.com/paulirish/5d52fb081b3570c81e3a

Implementation with 'scroll' const speakers = [...document.querySelectorAll('.speaker-details')]; window.addEventListener('scroll', () =>
{ speakers.forEach(elem => { if (isElementInViewport(elem)) { elem.classList.add('party-party'); speakers.splice(speakers.indexOf(elem), 1); } }); });

Implementation with 'scroll' const speakers = [...document.querySelectorAll('.speaker-details')]; window.addEventListener('scroll', () =>
{ // really expensive speakers.forEach(elem => { if (isElementInViewport(elem)) { elem.classList.add('party-party'); speakers.splice(speakers.indexOf(elem), 1); } }); });

Implementation with 'scroll' 60FPS 1s / 60 16ms

Implementation with 'scroll' 60FPS 1s / 60 10ms 16ms

Intersection Observer

- Intersection Observer - (function() { const options = {
threshold: 1.0 }; const intersectionObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('party-party'); intersectionObserver.unobserve(entry.target); } }); }, options); [...document.querySelectorAll('.speaker-details')] .forEach(elem => intersectionObserver.observe(elem)); })();

Measure it!

- Intersection Observer - const options = { root: null,
// ☝ or document.querySelector('.foo') // default: null rootMargin: '10px', // ☝ or '10% 5%' or '1px 10% 3px 12%' // default: '0px 0px 0px 0px' threshold: 0.5 // ☝ or [0.25, 0.5, 0.75, 1] // default: 0 }; w3c.github.io/IntersectionObserver/#intersection-observer-interface

// this fires when: // 1. The target begins entering
the viewport (0 < ratio < 1). // 2. The target fully enters the viewport (ratio >= 1). // 3. The target begins leaving the viewport (1 > ratio > 0). // 4. The target fully leaves the viewport (ratio <= 0). let observer = new IntersectionObserver(handler, { threshold: [0, 1] }); - Intersection Observer - hacks.mozilla.org/2017/08/intersection-observer-comes-to-ﬁrefox/

- Intersection Observer - threshold = 0 viewport

- Intersection Observer - threshold = 0 entry => {
console.log(entry.isIntersecting) // true console.log(entry.intersectionRatio) // sth. around 0 } viewport

- Intersection Observer - threshold = 0 entry => {
console.log(entry.isIntersecting) // false console.log(entry.intersectionRatio) // 0 } viewport

- Intersection Observer - threshold > 0 (e.g. 0.5) viewport

- Intersection Observer - threshold > 0 (e.g. 0.5) entry
=> { console.log(entry.isIntersecting) // true console.log(entry.intersectionRatio) // sth. around 0.5 } viewport

- Intersection Observer - developers.google.com/web/fundamentals/media/mobile-web-video-playback if ('IntersectionObserver' in window) {
// Show/hide mute button based // on video visibility in the page. function onIntersection(entries) { entries.forEach(function(entry) { muteButton.hidden = video.paused || entry.isIntersecting; }); } var observer = new IntersectionObserver(onIntersection); observer.observe(video); }

twitter.com/jaffathecake/status/857537625154097152

- Intersection Observer - caniuse.com/#feat=intersectionobserver * in development *

- Intersection Observer - * Incompatibilities between spec and implementations
github.com/WICG/IntersectionObserver/issues/222 github.com/WICG/IntersectionObserver/issues/211

- Intersection Observer - * Incompatibilities between spec and implementations
github.com/WICG/IntersectionObserver/issues/222 github.com/WICG/IntersectionObserver/issues/211 Resolved since Oct 17, 2017

- Intersection Observer - Polyﬁllable? github.com/WICG/IntersectionObserver YES!

Let's celebrate the whole schedule!

- Intersection Observer - (function() { // Intersection Observer code
// third-party implementation // No interface to hook into // No access to the implementation // (ಥ_ಥ) (ಥ_ಥ) (ಥ_ಥ) })();

Mutation Observer

- Mutation Observer - (function() { const list = document.querySelector('.schedule');
const nrOfTalks = list.querySelectorAll('.speaker').length; const config = { attributes: true, subtree: true }; let talksSeen = 0; const mutationObserver = new MutationObserver(mutations => { mutations.forEach((mutation) => { if ( mutation.type === 'attributes' && mutation.target.classList.contains('party-party') ) { talksSeen++; } }) if (talksSeen === nrOfTalks) { [...Array(20)].forEach(cornify_add); mutationObserver.disconnect(); } }); mutationObserver.observe(list, config); })();

const options = { childList: true, // ☝ observe target's
children attributes: true, // ☝ observe target's attributes subtree: true, // ☝ observe target and its descendants ... }; dom.spec.whatwg.org/#interface-mutationobserver - Mutation Observer -

caniuse.com/#feat=mutationobserver - Mutation Observer -

But let's always watch out for performance

WAYS TO MEASURE PERFORMANCE Synthetic Monitoring Real User Monitoring

REAL USER METRICS (RUM) NAVIGATION TIMING API RESOURCE TIMING API
USER TIMING API

- Navigation Timing API - w3c.github.io/navigation-timing/ window.performance.timing

- Navigation Timing API - { "navigationStart": 1494722965671, "unloadEventStart": 0,
"unloadEventEnd": 0, "redirectStart": 0, "redirectEnd": 0, "fetchStart": 1494722965838, "domainLookupStart": 1494722965841, "domainLookupEnd": 1494722972627, "connectStart": 1494722972627, "connectEnd": 1494722973191, "secureConnectionStart": 1494722972815, "requestStart": 1494722973191, "responseStart": 1494722973667, "responseEnd": 1494722973681, "domLoading": 1494722973681, "domInteractive": 1494722974288, "domContentLoadedEventStart": 1494722974288, "domContentLoadedEventEnd": 1494722974320, "domComplete": 1494722974571, "loadEventStart": 1494722974571, "loadEventEnd": 1494722974574 } w3c.github.io/navigation-timing/ window.performance.timing

- Navigation Timing API - w3c.github.io/navigation-timing/

- Resource Timing API - window.performance.getEntriesByType('resource')

- Resource Timing API - [ ..., { connectEnd: 117.69500000000001,
connectStart: 117.69500000000001, decodedBodySize: 20133, domainLookupEnd: 117.69500000000001, domainLookupStart: 117.69500000000001, duration: 846.3100000000001, encodedBodySize: 20133, entryType: 'resource', fetchStart: 117.69500000000001, initiatorType: 'img', name: 'http://127.0.0.1:8080/image.png', redirectEnd: 0, redirectStart: 0, requestStart: 962.6750000000001, responseEnd: 964.0050000000001, responseStart: 963.45, secureConnectionStart: 0, startTime: 117.69500000000001, transferSize: 20391, workerStart: 0 } ] www.w3.org/TR/resource-timing-1/ window.performance.getEntriesByType('resource')

[...Array(20)].forEach(cornify_add); - User Timing API - w3c.github.io/user-timing/ if (talksSeen ===
nrOfTalks) { }

- User Timing API - w3c.github.io/user-timing/ if (talksSeen === nrOfTalks)
{ // measure how long this takes performance.mark('cornify_start'); [...Array(20)].forEach(cornify_add); performance.mark('cornify_end'); performance.measure( 'cornify_processing_time', 'cornify_start', 'cornify_end' ); }

- User Timing API - w3c.github.io/user-timing/ window.performance.getEntriesByType('mark') [ { duration:
0 entryType: 'mark' name: 'cornify_start' startTime: 39613.885 }, ... ]

- User Timing API - w3c.github.io/user-timing/ window.performance.getEntriesByType('measure') [ { duration:
5.9900000000016 entryType: 'measure' name: 'cornify_processing_time' startTime: 46002.34500000001 }, ... ]

ENTRY TYPE VALUES mark measure navigation resource ACCESSIBLE VIA getEntries
getEntriesByType getEntriesByName

Performance Observer

- Performance Observer - (function() { const perfObserver = new
PerformanceObserver(list => { list.getEntries().forEach((entry) => { console.log( `Name: ${ entry.name }, Duration: ${ entry.duration }` ); }); }); perfObserver.observe({entryTypes: ['measure']}); })(); www.w3.org/TR/performance-timeline-2/#dom-performanceobserver

- Performance Timeline - The developer is encouraged to use
PerformanceObserver where possible. Further, new performance APIs and metrics may only be available through the PerformanceObserver interface. www.w3.org/TR/performance-timeline-2/#introduction

- Paint Timing - www.w3.org/TR/paint-timing/ const perfObserver = new PerformanceObserver(list
=> { list.getEntries().forEach((entry) => { // Process entries // report back for analytics and monitoring // entry.name -> 'first-paint' // entry.name -> 'first-contentful-paint' } ); }); perfObserver.observe({entryTypes: ['paint']});

- Long Task - github.com/w3c/longtasks var perfObserver = new PerformanceObserver(function(list)
{ list.getEntries().forEach((entry) => { // Process entries // report back for analytics and monitoring // ... }); }); perfObserver.observe({entryTypes: ['longtask']});

<img src="hero.jpg" onload="performance.clearMarks('img displayed'); performance.mark('img displayed');"> <script> performance.clearMarks('img displayed'); performance.mark('img
displayed'); </script> - Hero Element Timing - speedcurve.com/blog/user-timing-and-custom-metrics/

- Hero Element Timing - docs.google.com/document/d/1yRYfYR1DnHtgwC4HRR04ipVVhT1h5gkI6yPmKCgJkyQ/edit <div timing=”dom, paint”></div> const
perfObserver = new PerformanceObserver(list => { list.getEntries().forEach((entry) => { // Process entries // report back for analytics and monitoring // ... }); }); perfObserver.observe({entryTypes: ['element']}); github.com/w3c/charter-webperf/issues/30

- Server Timing - https://developer.akamai.com/blog/2017/06/07/completing-performance-analysis-server-timing/ Server-Timing: acl: 10 Server-Timing: db:
125 Server-Timing: serverName; edge.machinename.net https://w3c.github.io/server-timing/ const perfObserver = new PerformanceObserver(function(list) { list.getEntries().forEach((entry) => { // Process entries // report back for analytics and monitoring // ... }); }) perfObserver.observe({entryTypes: ['server']})

LEVERAGING THE METRICS THAT MOST AFFECT USER EXPERIENCE https://www.youtube.com/watch?v=6Ljq-Jn-EgU

- Performance Observer - developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver * under consideration *

- Performance Observer - we'll see... Polyﬁllable?

I had to cheat a bit...

Resize Observer

- Resize Observer - (function() { const resizeObserver = new
ResizeObserver(entries => { entries.forEach((entry) => { drawConfetti(entry); }); }); [...document.querySelectorAll('.hall-schedule__title')] .forEach(desc => resizeObserver.observe(desc)); })();

- Resize Observer - Observation also ﬁres when watched Element
is inserted/removed from DOM watched Element display gets set to none Observation does not ﬁre for triggered CSS transforms  wicg.github.io/ResizeObserver/#intro

- Resize Observer - developers.google.com/web/updates/2016/10/resizeobserver const ro = new ResizeObserver((entries)
=> { document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight; }); // Observe the scrollingElement // for when the window gets resized ro.observe(document.scrollingElement); // Observe the timeline // to process new messages ro.observe(timeline);

- Resize Observer -

- Resize Observer - developers.google.com/web/updates/2016/10/resizeobserver * under consideration ** behind
a ﬂag ** * **

- Resize Observer - Polyﬁllable? github.com/que-etc/resize-observer-polyﬁll so, so...

But let's face the resize problem Photo by madstreetz

- Event streams - element

- Event streams - element initial call

- Event streams - element initial call resize resize resize
opening transition

element initial call resize resize resize - Event streams -
opening transition

element initial call resize resize resize resize resize resize -
Event streams - opening transition closing transition

- Event streams - element initial call resize resize resize
resize resize resize opening transition closing transition

- Event streams - onResize(entry => { drawConfetti(entry); });

- Event streams - }); let isFirst = true; onResize(entry
=> { if (isFirst) { isFirst = false; return; } drawConfetti(entry);

- Event streams - }); let isFirst = true; let
last; onResize(entry => { if (isFirst) { isFirst = false; return; } if ( last && last.contentRect.height < entry.contentRect.height ) { drawConfetti(entry); last = entry; }

Observables

- Observables - A collection that arrives over time.

- Observables - function getObservableWithThreeValues () { return new Observable((observer)
=> { observer.next(1); observer.next(2); observer.next(3); observer.complete(); }); } const observer = { next(value) { console.log('next:', value) }, error(err) { console.error(err) }, complete() { console.log('We are done') }, } const subscription = getObservableWithThreeValues().subscribe(observer) // next: 2 // next: 4 // next: 6 // We are done

=> { observer.next(1); observer.next(2); observer.next(3); observer.complete(); }); } const observer = { next(value) { console.log('next:', value) }, error(err) { console.error(err) }, complete() { console.log('We are done') }, }; const subscription = getObservableWithThreeValues().subscribe(observer) // next: 2 // next: 4 // next: 6 // We are done

=> { observer.next(1); observer.next(2); observer.next(3); observer.complete(); }); } const observer = { next(value) { console.log('next:', value) }, error(err) { console.error(err) }, complete() { console.log('We are done') }, }; const subscription = getObservableWithThreeValues().subscribe(observer); // next: 1 // next: 2 // next: 3 // We are done

- Observables - It's a collection!

- Observables - It's a collection! // like Array.prototype.map observable.map
// like Array.prototype.filter observable.filter // like Array.prototype.reduce observable.reduce

- Observables - function getResizeStream(elem) { return Rx.Observable.create((observer) => {
const resizeObserver = new ResizeObserver((entries) => { entries.forEach(entry => { drawConfetti(entry); }); }); resizeObserver.observe(elem); }) }

const resizeObserver = new ResizeObserver((entries) => { entries.forEach(entry => { observer.next(entry); }); }); resizeObserver.observe(elem); }); }

const resizeObserver = new ResizeObserver(entries => { entries.forEach(entry => { observer.next(entry); }) }); resizeObserver.observe(elem); }); } Collection super powers

- Observables - const subscription = getResizeStream(elem); .skip(1) .pairwise() .filter(([prev,
current]) => { return prev.contentRect.height < current.contentRect.height; }) .map(([prev, current]) => current) .subscribe({ next: (entry) => drawConfetti(entry), error: console.error, complete: () => { console.log('Complete!') } }); element initial call opening transition closing transition

- Observables - const subscription = getResizeStream(elem) .skip(1); .pairwise() .filter(([prev,

- Observables - const subscription = getResizeStream(elem) .skip(1) .pairwise(); .filter(([prev,

- Observables - const subscription = getResizeStream(elem) .skip(1) .pairwise() .filter(([prev,
current]) => { return prev.contentRect.height < current.contentRect.height; }); .map(([prev, current]) => current) .subscribe({ next: (entry) => drawConfetti(entry), error: console.error, complete: () => { console.log('Complete!') } }); element initial call opening transition closing transition

current]) => { return prev.contentRect.height < current.contentRect.height; }) .map(([prev, current]) => current); .subscribe({ next: (entry) => drawConfetti(entry), error: console.error, complete: () => { console.log('Complete!') } }); element initial call opening transition closing transition

current]) => { return prev.contentRect.height < current.contentRect.height; }) .map(([prev, current]) => current) .subscribe({ next: (entry) => drawConfetti(entry), error: console.error, complete: () => { console.log('Complete!'); } }); element initial call opening transition closing transition

Intersection Observer Mutation Observer Performance Observer Resize Observer Observables

So much has changed

So much will change

Let's celebrate!

Let's celebrate! Thanks. @stefanjudis Slides ctﬂ.io/watch-your-back-browser

Watch your back, Browser! You're being observed.

Watch your back, Browser! You're being observed.

More Decks by stefan judis

Other Decks in Technology

Featured

Transcript