Browser Rendering Performance in a nutshell

Rendering Performance in a nutshell Ahmed Moawad Lead Frontend Engineer
@ Seera

How Browser renders our apps Pixel Pipeline (CRP) Rendering Performance
Optimization

HTML PARSER <html> <head> <title>Document</title> </head> <body> <h1>Greeting</h1> <div> <p>Hi
There</p> </div> </body> </html> HTML Parser DOM HTML

HTML PARSER <html> <head> <title>Document</title> </head> <body> <h1>Greeting</h1> <div> <p>Hi
There</p> </div> </body> </html> html head title div p body Document Hi There h1 Greeting HTML Parser DOM HTML DOM Tree

p { display: none; } h1:after { content: ‘click me’;
} CSS CSS Parser RENDER TREE html head title div p body Document Hi There h1 Greeting DOM Tree CSSOM

p { display: none; } h1:after { content: ‘click me’;
} CSS Render Tree html div p body Hi There h1 Greeting :after Click me CSS Parser RENDER TREE html head title div p body Document Hi There h1 Greeting DOM Tree CSSOM

html body h1 div :after LAYOUT Render Tree html div
body h1 Greeting :after Click me Layout

Greeting click here html body h1 div :after Layout Paint
PAINT

Greeting click here Layers Paint Composite Layers

Optimization

JavaScript Style Layout Paint Layers Pixel Pipeline change element style
or remove Element or add element or animate Element recalculate Styles change Element width or change its margin scale Element or rotate Element or fade element change background or change font color

JavaScript Style Layout Paint Layers Layout CRP JavaScript p.display =
none; All steps will run because display property will remove the element so the geometry of the page will be changed

JavaScript Style Layout Paint Layers Paint CRP JavaScript p.visibility =
hidden; Layout will be skipped because visibility property will hide the element without removing it so the page geometry will not change

JavaScript Style Layout Paint Layers Layers CRP JavaScript p.opacity =
0; Layout & Paint will be skipped because opacity property will add a mask layer over the element without removing it or repaint it

Optimization

Only 60 FPS JavaScript Style Layout Paint Layers A frame
rate of 60 fps is the target for a smooth performance 16.7 ms Frame Life Span

Use requestAnimationFrame JavaScript Style Layout Paint Layers 16.7 ms 16.7
ms Event fired

Use requestAnimationFrame JavaScript Style Layout Paint Layers 16.7 ms 16.7
ms Event fired requestAnimationFrame( ) requestAnimationFrame will delay the event handler execution to the beginning of next frame.

Use web workers for long tasks JavaScript Style Layout Paint
Layers Main Thread Long task 16.7 ms 16.7 ms

Use web workers for long tasks JavaScript Style Layout Paint
Layers Main Thread Long task 16.7 ms 16.7 ms idle Web Worker Long task Web worker will make the main thread idle to be able to handle other task until the long task get executed.

JavaScript Style Reduce CSS Selector Complexity Layout Paint Layers p
~ div > .neighbor + h1:after { background : red; } CSS Parser L You can use BEM or use Scoped Styles as in Vue or CSS in JS like styled components

Layout Avoid Layout Thrashing JavaScript Paint Layers Style for (let
i = 0; i < paragraphs.length; i++) { const h1Width = h1.offsetWidth; paragraphs[i].style.width = h1Width + "px"; } Forced Synchronous Layout Forced Synchronous Layout happens when the code force the browser to read and write repeatedly so with every read after write we will need to rebuild the layout to get the accurate reading.

Layout Avoid Layout Thrashing JavaScript Paint Layers Style for (let
i = 0; i < paragraphs.length; i++) { const h1Width = h1.offsetWidth; paragraphs[i].style.width = h1Width + "px"; } const h1Width = h1.offsetWidth; for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = h1Width + "px"; } Forced Synchronous Layout Forced Synchronous Layout happens when the code force the browser to read and write repeatedly so with every read after write we will need to rebuild the layout to get the accurate reading. Here we will read once and then iterative reading so the browser will not re build the layout until all writing processes done.

Paint JavaScript Style Layout Layers Promote Elements that move or
fade transform: translate(10px, 20px); Don’t over use Element Promotion .create-layer { transform: translateZ(0); } opacity: 0.3;

Debounce recurring event handlers Layers JavaScript Style Layout Paint Recurring
event handlers will cause lagging in the Compositor (UI) thread if the main thread take time to handle the event. i.e. typing in search input. Compositor Thread Main Thread User start typing Commit to GPU Blocked Input Event fired User type again onInputChange

Debounce recurring event handlers Layers JavaScript Style Layout Paint Compositor
Thread Main Thread User start typing Commit to GPU Blocked Input Event fired User type again onInputChange debounce( ) Debouncing the Recurring events will decrease the blocking time of the UI thread and enhance the user experience on typing.

Useful Resources @aerotwist @paul_irish PEOPLE TO FOLLOW RESOURCES Web Developers
– Rendering Performance by Paul Lewis A Rendering Performance Guide for Developers by Paul Lewis Performance Tooling by Paul Irish The main thread is overworked & underpaid by Surma @addyosmani Browser Rendering Optimization by Udacity

Thank You /AhmedMoawad /ahmedmoawad

Browser Rendering Performance in a nutshell

Browser Rendering Performance in a nutshell

Ahmed Moawad

Other Decks in Programming

Featured

Transcript

Rendering Performance in a nutshell Ahmed Moawad Lead Frontend Engineer

How Browser renders our apps Pixel Pipeline (CRP) Rendering Performance

HTML PARSER <html> <head> <title>Document</title> </head> <body> <h1>Greeting</h1> <div> <p>Hi

HTML PARSER <html> <head> <title>Document</title> </head> <body> <h1>Greeting</h1> <div> <p>Hi

p { display: none; } h1:after { content: ‘click me’;

p { display: none; } h1:after { content: ‘click me’;

html body h1 div :after LAYOUT Render Tree html div

Greeting click here html body h1 div :after Layout Paint

Greeting click here Layers Paint Composite Layers

How Browser renders our apps Pixel Pipeline (CRP) Rendering Performance

JavaScript Style Layout Paint Layers Pixel Pipeline change element style

JavaScript Style Layout Paint Layers Layout CRP JavaScript p.display =

JavaScript Style Layout Paint Layers Paint CRP JavaScript p.visibility =

JavaScript Style Layout Paint Layers Layers CRP JavaScript p.opacity =

How Browser renders our apps Pixel Pipeline (CRP) Rendering Performance

Only 60 FPS JavaScript Style Layout Paint Layers A frame

Use requestAnimationFrame JavaScript Style Layout Paint Layers 16.7 ms 16.7

Use requestAnimationFrame JavaScript Style Layout Paint Layers 16.7 ms 16.7

Use web workers for long tasks JavaScript Style Layout Paint

Use web workers for long tasks JavaScript Style Layout Paint

JavaScript Style Reduce CSS Selector Complexity Layout Paint Layers p

Layout Avoid Layout Thrashing JavaScript Paint Layers Style for (let

Layout Avoid Layout Thrashing JavaScript Paint Layers Style for (let

Paint JavaScript Style Layout Layers Promote Elements that move or

Debounce recurring event handlers Layers JavaScript Style Layout Paint Recurring

Debounce recurring event handlers Layers JavaScript Style Layout Paint Compositor

Useful Resources @aerotwist @paul_irish PEOPLE TO FOLLOW RESOURCES Web Developers

Thank You /AhmedMoawad /ahmedmoawad