SlideShare a Scribd company logo
Introduction to
Performance APIs
Chrome Tech Talk Night #12
Shogo Sensui (@1000ch)
Shogo Sensui
(@1000ch)
Software Engineer
Merpay, Inc / Mercari, Inc
Table of contents
● Lazy Loading
● Prefetch
● Off The Main Thread
🐢 Lazy Loading
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);
WebKit shipped!!!
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
});
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>
⚡ Prefetch
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>
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/">
https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
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">
Chrome Prerender History
chrome://net-internals/#prerender
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')
]
});
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.
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
AMP’s URL is a long-standing problem..
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
🚀 Off The Main Thread
More rich,
More heavy.
Web Page’s payload is increasing continuously
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
https://dev.to/addyosmani/web-page-usability-matters-3aok
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 (inner browser)
● Parse and compile scripts in V8
● HTMLParser Redesign
● Will Worklets work on Worker thread?
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
https://threejs.org/examples/webgl_worker_offscreencanvas.html
More easier postMessage() !!!
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 🙏

More Related Content

What's hot

MongoDB and Node.js
MongoDB and Node.jsMongoDB and Node.js
MongoDB and Node.js
Norberto Leite
 
NodeJS - Server Side JS
NodeJS - Server Side JS NodeJS - Server Side JS
NodeJS - Server Side JS
Ganesh Kondal
 
Nodejs
NodejsNodejs
3 Things Everyone Knows About Node JS That You Don't
3 Things Everyone Knows About Node JS That You Don't3 Things Everyone Knows About Node JS That You Don't
3 Things Everyone Knows About Node JS That You Don't
F5 Buddy
 
"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin
"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin
"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin
Fwdays
 
Let's migrate to Swift 3.0
Let's migrate to Swift 3.0Let's migrate to Swift 3.0
Let's migrate to Swift 3.0
CocoaHeads France
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node js
Akshay Mathur
 
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
JavaScript as a Server side language (NodeJS): JSConf 2011, DhakaJavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
Nurul Ferdous
 
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
Binary Studio
 
Node js for enterprise
Node js for enterpriseNode js for enterprise
Node js for enterprise
ravisankar munusamy
 
JavaScript Web Workers
JavaScript Web WorkersJavaScript Web Workers
JavaScript Web Workers
Tobias Pfeiffer
 
Nodejs getting started
Nodejs getting startedNodejs getting started
Nodejs getting started
Triet Ho
 
Node.js Patterns for Discerning Developers
Node.js Patterns for Discerning DevelopersNode.js Patterns for Discerning Developers
Node.js Patterns for Discerning Developers
cacois
 
Realtime web application with java
Realtime web application with javaRealtime web application with java
Realtime web application with java
JeongHun Byeon
 
webworkers
webworkerswebworkers
webworkers
Asanka Indrajith
 
Node js training (1)
Node js training (1)Node js training (1)
Node js training (1)
Ashish Gupta
 
Getting started with node JS
Getting started with node JSGetting started with node JS
Getting started with node JS
Hamdi Hmidi
 
Before start
Before startBefore start
Before start
Medhat Dawoud
 
Treinamento frontend
Treinamento frontendTreinamento frontend
Treinamento frontend
Adrian Caetano
 
Analyse Yourself
Analyse YourselfAnalyse Yourself
Analyse Yourself
Norberto Leite
 

What's hot (20)

MongoDB and Node.js
MongoDB and Node.jsMongoDB and Node.js
MongoDB and Node.js
 
NodeJS - Server Side JS
NodeJS - Server Side JS NodeJS - Server Side JS
NodeJS - Server Side JS
 
Nodejs
NodejsNodejs
Nodejs
 
3 Things Everyone Knows About Node JS That You Don't
3 Things Everyone Knows About Node JS That You Don't3 Things Everyone Knows About Node JS That You Don't
3 Things Everyone Knows About Node JS That You Don't
 
"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin
"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin
"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin
 
Let's migrate to Swift 3.0
Let's migrate to Swift 3.0Let's migrate to Swift 3.0
Let's migrate to Swift 3.0
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node js
 
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
JavaScript as a Server side language (NodeJS): JSConf 2011, DhakaJavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
JavaScript as a Server side language (NodeJS): JSConf 2011, Dhaka
 
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
 
Node js for enterprise
Node js for enterpriseNode js for enterprise
Node js for enterprise
 
JavaScript Web Workers
JavaScript Web WorkersJavaScript Web Workers
JavaScript Web Workers
 
Nodejs getting started
Nodejs getting startedNodejs getting started
Nodejs getting started
 
Node.js Patterns for Discerning Developers
Node.js Patterns for Discerning DevelopersNode.js Patterns for Discerning Developers
Node.js Patterns for Discerning Developers
 
Realtime web application with java
Realtime web application with javaRealtime web application with java
Realtime web application with java
 
webworkers
webworkerswebworkers
webworkers
 
Node js training (1)
Node js training (1)Node js training (1)
Node js training (1)
 
Getting started with node JS
Getting started with node JSGetting started with node JS
Getting started with node JS
 
Before start
Before startBefore start
Before start
 
Treinamento frontend
Treinamento frontendTreinamento frontend
Treinamento frontend
 
Analyse Yourself
Analyse YourselfAnalyse Yourself
Analyse Yourself
 

Similar to Introduction to Performance APIs

Ten practical ways to improve front-end performance
Ten practical ways to improve front-end performanceTen practical ways to improve front-end performance
Ten practical ways to improve front-end performance
Andrew Rota
 
Road to sbt 1.0: Paved with server (2015 Amsterdam)
Road to sbt 1.0: Paved with server (2015 Amsterdam)Road to sbt 1.0: Paved with server (2015 Amsterdam)
Road to sbt 1.0: Paved with server (2015 Amsterdam)
Eugene Yokota
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 
Dust.js
Dust.jsDust.js
Micronaut: A new way to build microservices
Micronaut: A new way to build microservicesMicronaut: A new way to build microservices
Micronaut: A new way to build microservices
Luram Archanjo
 
Web summit.pptx
Web summit.pptxWeb summit.pptx
Web summit.pptx
171SagnikRoy
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia
 
Road to sbt 1.0 paved with server
Road to sbt 1.0   paved with serverRoad to sbt 1.0   paved with server
Road to sbt 1.0 paved with server
Eugene Yokota
 
Sprint 17
Sprint 17Sprint 17
Sprint 17
ManageIQ
 
GDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJSGDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJS
Pratik Majumdar
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
Mahmoud Tolba
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applications
hchen1
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page Application
Codemotion
 
Building an Extensible, Resumable DSL on Top of Apache Groovy
Building an Extensible, Resumable DSL on Top of Apache GroovyBuilding an Extensible, Resumable DSL on Top of Apache Groovy
Building an Extensible, Resumable DSL on Top of Apache Groovy
jgcloudbees
 
BaseX user-group-talk XML Prague 2013
BaseX user-group-talk XML Prague 2013BaseX user-group-talk XML Prague 2013
BaseX user-group-talk XML Prague 2013
Andy Bunce
 
Advanced web application architecture - Talk
Advanced web application architecture - TalkAdvanced web application architecture - Talk
Advanced web application architecture - Talk
Matthias Noback
 
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
ken.egozi
 
Refactoring to a SPA
Refactoring to a SPARefactoring to a SPA
Refactoring to a SPA
Marcello Teodori
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
catherinewall
 
Node js
Node jsNode js

Similar to Introduction to Performance APIs (20)

Ten practical ways to improve front-end performance
Ten practical ways to improve front-end performanceTen practical ways to improve front-end performance
Ten practical ways to improve front-end performance
 
Road to sbt 1.0: Paved with server (2015 Amsterdam)
Road to sbt 1.0: Paved with server (2015 Amsterdam)Road to sbt 1.0: Paved with server (2015 Amsterdam)
Road to sbt 1.0: Paved with server (2015 Amsterdam)
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Dust.js
Dust.jsDust.js
Dust.js
 
Micronaut: A new way to build microservices
Micronaut: A new way to build microservicesMicronaut: A new way to build microservices
Micronaut: A new way to build microservices
 
Web summit.pptx
Web summit.pptxWeb summit.pptx
Web summit.pptx
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
 
Road to sbt 1.0 paved with server
Road to sbt 1.0   paved with serverRoad to sbt 1.0   paved with server
Road to sbt 1.0 paved with server
 
Sprint 17
Sprint 17Sprint 17
Sprint 17
 
GDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJSGDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJS
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applications
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page Application
 
Building an Extensible, Resumable DSL on Top of Apache Groovy
Building an Extensible, Resumable DSL on Top of Apache GroovyBuilding an Extensible, Resumable DSL on Top of Apache Groovy
Building an Extensible, Resumable DSL on Top of Apache Groovy
 
BaseX user-group-talk XML Prague 2013
BaseX user-group-talk XML Prague 2013BaseX user-group-talk XML Prague 2013
BaseX user-group-talk XML Prague 2013
 
Advanced web application architecture - Talk
Advanced web application architecture - TalkAdvanced web application architecture - Talk
Advanced web application architecture - Talk
 
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
 
Refactoring to a SPA
Refactoring to a SPARefactoring to a SPA
Refactoring to a SPA
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
 
Node js
Node jsNode js
Node js
 

More from Shogo Sensui

Web Standards Interop 2022
Web Standards Interop 2022Web Standards Interop 2022
Web Standards Interop 2022
Shogo Sensui
 
Web Standards 2018
Web Standards 2018Web Standards 2018
Web Standards 2018
Shogo Sensui
 
The State of Web Components
The State of Web ComponentsThe State of Web Components
The State of Web Components
Shogo Sensui
 
Component of Web Frontend
Component of Web FrontendComponent of Web Frontend
Component of Web Frontend
Shogo Sensui
 
Web フロントエンドの変遷とこれから
Web フロントエンドの変遷とこれからWeb フロントエンドの変遷とこれから
Web フロントエンドの変遷とこれから
Shogo Sensui
 
Introduction to Resource Hints
Introduction to Resource HintsIntroduction to Resource Hints
Introduction to Resource Hints
Shogo Sensui
 
Web Components 2016 & Polymer v2
Web Components 2016 & Polymer v2Web Components 2016 & Polymer v2
Web Components 2016 & Polymer v2
Shogo Sensui
 
これからのJavaScriptの話
これからのJavaScriptの話これからのJavaScriptの話
これからのJavaScriptの話
Shogo Sensui
 
初心者のためのWeb標準技術
初心者のためのWeb標準技術初心者のためのWeb標準技術
初心者のためのWeb標準技術
Shogo Sensui
 
Introduction to Service Worker
Introduction to Service WorkerIntroduction to Service Worker
Introduction to Service Worker
Shogo Sensui
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize images
Shogo Sensui
 
Web Components changes Web Development
Web Components changes Web DevelopmentWeb Components changes Web Development
Web Components changes Web Development
Shogo Sensui
 
Re-think about Web Performance
Re-think about Web PerformanceRe-think about Web Performance
Re-think about Web Performance
Shogo Sensui
 
Browser Computing Structure
Browser Computing StructureBrowser Computing Structure
Browser Computing Structure
Shogo Sensui
 
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winterBrush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui
 
Brush up your Coding!
Brush up your Coding!Brush up your Coding!
Brush up your Coding!
Shogo Sensui
 
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsFunctional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
Shogo Sensui
 

More from Shogo Sensui (17)

Web Standards Interop 2022
Web Standards Interop 2022Web Standards Interop 2022
Web Standards Interop 2022
 
Web Standards 2018
Web Standards 2018Web Standards 2018
Web Standards 2018
 
The State of Web Components
The State of Web ComponentsThe State of Web Components
The State of Web Components
 
Component of Web Frontend
Component of Web FrontendComponent of Web Frontend
Component of Web Frontend
 
Web フロントエンドの変遷とこれから
Web フロントエンドの変遷とこれからWeb フロントエンドの変遷とこれから
Web フロントエンドの変遷とこれから
 
Introduction to Resource Hints
Introduction to Resource HintsIntroduction to Resource Hints
Introduction to Resource Hints
 
Web Components 2016 & Polymer v2
Web Components 2016 & Polymer v2Web Components 2016 & Polymer v2
Web Components 2016 & Polymer v2
 
これからのJavaScriptの話
これからのJavaScriptの話これからのJavaScriptの話
これからのJavaScriptの話
 
初心者のためのWeb標準技術
初心者のためのWeb標準技術初心者のためのWeb標準技術
初心者のためのWeb標準技術
 
Introduction to Service Worker
Introduction to Service WorkerIntroduction to Service Worker
Introduction to Service Worker
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize images
 
Web Components changes Web Development
Web Components changes Web DevelopmentWeb Components changes Web Development
Web Components changes Web Development
 
Re-think about Web Performance
Re-think about Web PerformanceRe-think about Web Performance
Re-think about Web Performance
 
Browser Computing Structure
Browser Computing StructureBrowser Computing Structure
Browser Computing Structure
 
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winterBrush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
 
Brush up your Coding!
Brush up your Coding!Brush up your Coding!
Brush up your Coding!
 
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsFunctional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
 

Recently uploaded

BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
SynapseIndia
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
Priyanka Aash
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
Priyanka Aash
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 

Recently uploaded (20)

BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 

Introduction to Performance APIs

  • 1. Introduction to Performance APIs Chrome Tech Talk Night #12 Shogo Sensui (@1000ch)
  • 3. Table of contents ● Lazy Loading ● Prefetch ● Off The Main Thread
  • 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);
  • 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>
  • 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/">
  • 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">
  • 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
  • 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
  • 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 🙏