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

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

HTML PARSER Document

Greeting

HTML Parser DOM HTML 

HTML PARSER Document

Greeting

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 

How Browser renders our apps Pixel Pipeline (CRP) Rendering Performance 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 

How Browser renders our apps Pixel Pipeline (CRP) Rendering Performance 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