Alfian Busyro
JavaScript and Web Performance Addict
Deep Dive into
JavaScript Asynchronous Process
JS Async process under the hood and performance enhancements
# JS Async
Plus
What is asynchronous process
How to code Asynchronous programming
Use cases and examples
# JS Async
# JS Async
# Browser Mechanics
# Browser Mechanics
# Browser Mechanics
V8
Squirrelfish (Part of Webkit)
SpiderMonkey
Hermes, etc
# Thread
# Thread
Computer program
=>
memory
=>
process
Process
A thread is a sequence of such instructions within a program that can be executed independently of other code.
# Thread
# Thread
# Browser Mechanics
Browser
Thread
I/O
Main /
Rendering engine
Area control: browser
Area control: tab, window
# Browser Mechanics
JavaScript interpreter lives
||
JavaScript process only exist in JSCore
||
JSCore only exist in main thread
||
JavaScript process is single threaded
# Thread
JavaScript process is single threaded
||
one thing at a time
Main Thread a.k.a
Event Loop
# Call Stack
# Call Stack
function multiply(a, b) {
return a * b;
}
function sqare(n) {
return multiply(n, n);
}
function printSquare(n) {
let squared = square (n);
console.log(squared);
}
printSquare(5);
Call stack
run js
printSquare(5)
square(n)
multiply(n, n)
# Call Stack
function multiply(a, b) {
return a * b;
}
function sqare(n) {
return multiply(n, n);
}
function printSquare(n) {
let squared = square (n);
console.log(squared);
}
printSquare(5);
Call stack
run js
printSquare(5)
square(n)
multiply(n, n)
# Call Stack
# Call Stack
process = () => {
console.log('process ...');
this.process();
}
# Call Stack
processAsync = () => {
console.log('processAsync ...');
setTimeout(this.processAsync, 0);
}
# Call Stack
# Call Stack
process = () => {
console.log('process ...');
this.process();
}
Call stack
process()
process()
process()
process()
process()
process()
process()
process()
process()
process()
process()
# Call Stack
Call stack
processAsync = () => {
console.log('processAsync ...');
setTimeout(this.processAsync, 0);
}
processAsync()
# Call Stack
Call stack
processAsync = () => {
console.log('processAsync ...');
setTimeout(this.processAsync, 0);
}
# Event loop
# Event loop
# Event loop
# Event loop
Task queue
Rendering
style
layout
layout
paint
# Event loop
Render-blocking resources are scripts, stylesheets, and HTML imports that block or delay the browser from rendering page content to the screen.
What cause render blocking in JavaScript?
What the effect of render blocking?
# Event loop
# Event loop
processPromise = () => {
Promise.resolve().then(this.processPromise);
}
# Event loop
processRaf = () => {
requestAnimationFrame(this.processRaf);
}
# Event loop
# Async type
# Async type
Time based
Microtask
Request Animation Frame
CMIIW
# Async type
Paint
Layout
1 frame
setTimeout process
setTimeout process
1 seconds = 60 frame (60fps) - 60hz display
# Async type
micro task can be execute anytime immediately
processPromise = () => {
Promise.resolve().then(this.processPromise);
}
# Async type
processPromise = () => {
Promise.resolve().then(this.processPromise);
}
# Async type
long process in rAF will be deferred
# Async type
# Async type
processPromiseRaf = () => {
requestAnimationFrame(() => Promise.resolve().then(this.processPromiseRaf));
}
# Quiz
# Quiz
process = () => {
console.log('one');
setTimeout(() => console.log('two'),0);
Promise.resolve().then(console.log('three'));
requestAnimationFrame(() => console.log('four'));
setTimeout(() => console.log('five'),0);
Promise.resolve().then(console.log('six'));
requestAnimationFrame(() => console.log('seven'));
}
a. one, two, three, four, five, six, seven
b. one, two, five, three, four, six, seven
c. one, two, five, four, seven, three, six
d. one, three, six, two, five, four, seven
e. one, three, six, four, seven, two, five
# Quiz
# conclusion
# End
By Alfian Busyro