Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browser Rendering Performance in a nutshell

Avatar for Ahmed Moawad Ahmed Moawad
December 03, 2021

Browser Rendering Performance in a nutshell

Avatar for Ahmed Moawad

Ahmed Moawad

December 03, 2021
Tweet

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. html body h1 div :after LAYOUT Render Tree html div

    body h1 Greeting :after Click me Layout
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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.
  11. Use web workers for long tasks JavaScript Style Layout Paint

    Layers Main Thread Long task 16.7 ms 16.7 ms
  12. 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.
  13. 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
  14. 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.
  15. 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.
  16. 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;
  17. 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
  18. 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.
  19. 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