Browser Rendering Performance in a nutshell

Transcript

1. Rendering Performance in a nutshell Ahmed Moawad Lead Frontend Engineer @ Seera
2. How Browser renders our apps Pixel Pipeline (CRP) Rendering Performance Optimization
3. HTML PARSER <html> <head> <title>Document</title> </head> <body> <h1>Greeting</h1> <div> <p>Hi There</p> </div> </body> </html> HTML Parser DOM HTML
4. 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
5. 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
6. 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
7. html body h1 div :after LAYOUT Render Tree html div body h1 Greeting :after Click me Layout
8. Greeting click here html body h1 div :after Layout Paint PAINT
9. Greeting click here Layers Paint Composite Layers
10. How Browser renders our apps Pixel Pipeline (CRP) Rendering Performance Optimization
11. 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
12. 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
13. 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
14. 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
15. How Browser renders our apps Pixel Pipeline (CRP) Rendering Performance Optimization
16. 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
17. Use requestAnimationFrame JavaScript Style Layout Paint Layers 16.7 ms 16.7 ms Event fired
18. 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.
19. Use web workers for long tasks JavaScript Style Layout Paint Layers Main Thread Long task 16.7 ms 16.7 ms
20. 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.
21. 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
22. 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.
23. 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.
24. 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;
25. 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
26. 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.
27. 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
28. Thank You /AhmedMoawad /ahmedmoawad