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);
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">
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.
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
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
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...
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
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()
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
postMessage(), but new interface is added. postMessage( // primitives, object, File, Blob, etc... message, // targetOrigin, transfer options ); postMessage( // string message, // targetOrigin targetOrigin, // transfer transfer );
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; |};
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();
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