Introduction to Performance APIs

0d605a3350dd7e91b8136aecffd5ceeb?s=47 Shogo Sensui
February 19, 2019

Introduction to Performance APIs

2019年2月19日に開催された Chrome Tech Talk Night #12 https://developers-jp.googleblog.com/2019/02/chrometechtalknight12.html の「Introduction to Performance APIs」のセッション資料です。

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

February 19, 2019
Tweet

Transcript

  1. Introduction to Performance APIs Chrome Tech Talk Night #12 Shogo

    Sensui (@1000ch)
  2. Shogo Sensui (@1000ch) Software Engineer Merpay, Inc / Mercari, Inc

  3. Table of contents • Lazy Loading • Prefetch • Off

    The Main Thread
  4. Lazy Loading

  5. Intersection Observer > The Intersection Observer API provides a way

    to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. const observer = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) { console.log(entry); } } }); const el = document.querySelector('#el); observer.observe(el);
  6. WebKit shipped!!!

  7. Intersection Observer v2 Intersection Observer v2 will detect the actual

    visiblity (like “opacity”). • New options ◦ trackVisiblity constructor option to track visiblity ◦ isVisible property in IntersectionObserverEntry • IntersectionObserver v2 demo const el = document.querySelector('#el); const observer = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isVisible) { console.log(entry); } } }); observer.observe(el, { trackVisiblity: true });
  8. Browser native lazy-loading lazyload attribute to load if display with-in

    viewport. • will be enabled on... ◦ <img> ◦ <iframe> • Lazyload images and iframes by bengreenstein · Pull Request #3752 · whatwg/html. • Blink LazyLoad Design Docs (public) <img src="https://example.com/image.jpg" lazyload="on"> <iframe src="https://google.com" lazyload="on"> </iframe>
  9. ⚡ Prefetch

  10. Priority Hints for resource loading importance attribute to indicate resource

    priority. • will be enabled on... ◦ <img> ◦ <iframe> ◦ <script> ◦ <link> ◦ fetch() • Priority Hints Draft Community Group Report 18 October 2018 <img src="https://example.com/image.jpg" importance="high"> <iframe src="https://example.com" importance="low"> </iframe> <script> fetch('https://google.com', { importance: 'high' }); </script>
  11. Resource Hints Resource Hints provides speculative loading which consists of...

    • DNS Prefetch: host • Preconnect: host • Prefetch: resources • Prerender: specified page <link rel="dns-prefetch" href="//example.com/"> <link rel="preconnect" href="//example.com/"> <link rel="prefetch" as="image" href="https://example.com/high-priority.jpg"> <link rel="prerender" href="https://example.com/">
  12. https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/

  13. Preload Preload provides aggressive loading • For nested resources for

    initial loading ◦ e.g) Images referred in CSS ◦ e.g) JavaScript loaded on JavaScript • Similar to Resource Hints <link rel="preload" href="https://example.com/high-priority.jpg"> <link rel="preload" href="https://example.com/high-priority.js">
  14. Chrome Prerender History chrome://net-internals/#prerender

  15. GoogleChromeLabs/quicklink > Faster subsequent page-loads by prefetching in-viewport links during

    idle time Speculative prefetch links with-in viewport using following APIs. • Intersection Observer • Prefetch (Resource Hints) • requestIdleCallback() • Network Information API. quicklink({ ignores: [ /\/api\/?/, uri => uri.includes('.zip'), (uri, el) => el.hasAttribute('noprefetch') ] });
  16. Nuxt v2.4 supports prefetching links in viewport > Nuxt.js will

    automagically prefetch the code-splitted pages linked with <nuxt-link> when visible in the viewport by default. This hugely improves the end user performances, inspired by quicklink.
  17. AMP is the best example for Prefetch/Prerender AMP prefetch/prerender some

    resources to achieve instant loading • Prefetch resources ◦ from Google AMP Cache hosted on Google • Prerender documents ◦ AMP’s prerender differs from <link rel=preload> ▪ Why AMP HTML does not take full advantage of the preload scanner
  18. AMP’s URL is a long-standing problem..

  19. Web Packaging will solve the AMP’s URL problem Web Packaging

    consists of... • Signed HTTP Exchanges: Signs request/response including URL with private keys and creates .sxg file • Bundled HTTP Exchanges: Bundles subresources in response • Loading Signed Exchanges: Loads signed .sxg file and displays the original URL instead of distributed URL
  20. Off The Main Thread

  21. More rich, More heavy. Web Page’s payload is increasing continuously

  22. Main Thread is busy • Loading (almost described by Critical

    Rendering Path) ◦ Fetch HTML ◦ Parse HTML and construct DOM ◦ Fetch sub-resources including CSS ◦ Parse CSS and construct CSSOM ◦ Eval heavy JavaScript (especially in recent web app) ◦ etc... • Runtime ◦ Interact to user operations ◦ Fetch data and render async ◦ etc...
  23. Performance metrics are changing 1. Focused to Server Response (old

    SSR) ◦ load event ◦ DOMContentLoaded event 2. Focused to First View (CSR a.k.a SPA) ◦ Speed Index ◦ First Paint, First Contentful Paint, First Meaningful Paint ◦ Async smooth page transition 3. Focusing to interactivity <= now ◦ First CPU Idle (Time to interactive) ◦ Responsibility on Runtime
  24. https://dev.to/addyosmani/web-page-usability-matters-3aok

  25. DOM manipulation is heavy • Virtual DOM was born ◦

    to solve rendering performance ◦ The Inner Working Of Virtual DOM ◦ View library has implemented it such as React, Vue.js, Angular, Preact • Virtual DOM achieve effective rendering, but... ◦ Diff algorithm is also heavy ◦ Can we use DOM in Worker? • Split DOM manipulation ◦ React Suspense provides async render with Promise ◦ Vue.js mutation will use requestIdleCallback()
  26. Off The Main Thread (inner browser) • Parse and compile

    scripts in V8 • HTMLParser Redesign • Will Worklets work on Worker thread?
  27. Off The Main Thread (web page land) • ampproject/worker-dom: DOM

    API implementation in Worker ◦ using MutationRecord and postMessage ◦ Browser-native Worker DOM is…? • OffscreenCanvas: Canvas in Worker ◦ Draw canvas on Worker Context • Concurrent JavaScript idea by WebKit
  28. https://threejs.org/examples/webgl_worker_offscreencanvas.html

  29. More easier postMessage() !!!

  30. postMessage() interface override We could only pass string messages to

    postMessage(), but new interface is added. postMessage( // primitives, object, File, Blob, etc... message, // targetOrigin, transfer options ); postMessage( // string message, // targetOrigin targetOrigin, // transfer transfer );
  31. JavaScript "blöcks" proposal We could only pass string messages to

    postMessage(), but new interface is added. const result = await worker{| const res = await fetch("people.json"); const json = await res.json(); return json[2].firstName; |};
  32. GoogleChromeLabs/comlink > Comlink removes the mental barrier of thinking about

    postMessage and hides the fact that you are working with workers. // main.js const MyClass = Comlink.proxy(new Worker("worker.js")); // `instance` is an instance of `MyClass` that lives in the worker! const instance = await new MyClass(); // logs “myValue = 42” await instance.logSomething();
  33. Further prospects • More adoptive loading ◦ By using Resource

    Hints, Intersection Observer, lazyload attribute, etc • More effective prefetch ◦ Like quicklink, Nikkei • Will View libraries use Worker? ◦ To calculate Virtual DOM diffs in Worker Thread ◦ To apply Virtual DOM patch from Worker Thread • Pray for browser optimizations