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);
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 rel="preload" href="https://example.com/high-priority.jpg"> rel="preload" href="https://example.com/high-priority.js">
Nuxt v2.4 supports prefetching links in viewport > Nuxt.js will automagically prefetch the code-splitted pages linked with when visible in the viewport by default. This hugely improves the end user performances, inspired by quicklink.
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 ■ Why AMP HTML does not take full advantage of the preload scanner
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
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...
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
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()
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
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 );
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; |};
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();
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
1000ch
kawaguti
keithyokoma
tkmnzm
ryohatanmonolog
hiboma
takaking22
kthrtty
keio_smilab
tsukubachallenge
shimap_sampo
yoshikikomoriya
eiki
morganepeng
skipperchong
phodgson
destraynor
jonyablonski
jlugia
kneath
erikaheidi
denniskardys
matthewcrist
shpigford