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

Take rendering process to pieces for Web browser performance.

October 22, 2019

Take rendering process to pieces for Web browser performance.

I try to take piece to process of rendering , then confirm what the browser do.
Especially, “Paint” process is high cost, so it is better to use “will-change” property.
Notice : Watch out for overuse!


October 22, 2019

More Decks by plum

Other Decks in Technology


  1. TL; DR - I try to take piece to process

    of rendering , then confirm what the browser do. - Especially, “Paint” process is high cost, so it is better to use “will-change” property. - Notice : Watch out for overuse!
  2. SLOW is - If the execution time has passed after

    a certain time. - A certain time is ?
  3. FPS - Frame (s) per second - 60f / s

    - Budget : 16.6msec / frame - Rendering + Housekeeping A certain time = Rendering : 10 msec +α https://developers.google.com/web/fundamentals/performance/rendering
  4. RAIL Model - Response - Response speed to UI operation.

    - Animation - Animation speed per frame. - Idle - Process speed when idle state (like back-ground task). - Load - Web page loading speed.
  5. Rendering - Draws text and images on the screen. -

    The engine draws structured text from a document (often HTML), and formats it properly based on the given style declarations (often given in CSS). https://developer.mozilla.org/en-US/docs/Glossary/Rendering_engine, Ұ෦มߋ
  6. JavaScript - Update html string template - Event occurrence and

    display element state change. https://developers.google.com/web/fundamentals/performance/rendering
  7. Style - Check which element (s) the CSS rule matches.

    - Apply rules and reflect in drawing. https://developers.google.com/web/fundamentals/performance/rendering 1SPCMFN 3FGFSUP$440.USFFGPSFMFNFOUTPG%0.USFFXJUI CSVUFGPSDF
  8. For improvement style - DOM - Design to be shallow.

    - CSSOM - Erase unused matching rules because they are referenced many times. - Descendant selector - Reduce. They consume CPU relatively. https://developers.google.com/web/fundamentals/performance/rendering
  9. Layout - In other words, Reflow - The phase to

    calculate exact position and size - Adjusting the influence from a element to some
 element (s). - High cost process - Maybe laggy. https://developers.google.com/web/fundamentals/performance/rendering
  10. Paint - HIGHEST COST PROCESS - The process of writing

    the synthesized pixel to the user’s screen. - text, color, border, shadow… - Paint process is high cost because this process is across multiple layers. https://developers.google.com/web/fundamentals/performance/rendering
  11. Paint - List making - List : Operations to call

    when drawing to screen with graphics API. - Perform pixel embedding - Rasterization - Covert data to dot-sets https://developers.google.com/web/fundamentals/performance/rendering
  12. Composite - Page parts are potentially drawn on multiple layers

    - Draw on the screen in the correct order so that the page renders correctly. - We don't be conscious because the browser feels good. - That being said, controllable. https://developers.google.com/web/fundamentals/performance/rendering
  13. Update layout - When we change the shape of an

    element, such as width, height, left or top position. - Check all other elements and "reflow" the page. - Repaint affected areas across layers - Full process runs https://developers.google.com/web/fundamentals/performance/rendering
  14. Update color - Update background-image, text color, shadow. - They

    do not affect page layout.
 -> Skip layout https://developers.google.com/web/fundamentals/performance/rendering
  15. Update cursor - No effect (basically…) - Note : depending

    on brows https://developers.google.com/web/fundamentals/performance/rendering
  16. CSS Triggers - It depends on CSS property which process

    of Pixel pipeline affects. - Concrete example - cursor: Except EdgeHTML, about composition - If it is WebKit, nothing will be affected -> Low cost and light weight - float: affects all processes https://csstriggers.com/
  17. Problem https://developers.google.com/web/fundamentals/performance/rendering - When two areas that require painting are

    combined by the browser, the entire screen needs to be repainted. - For example, pin a header at the top of the page (like global navigation) and draw something at the view bottom. - Eventually the entire screen is repainted. - I wish they was painted bottom area, it would be cheaper…
  18. will-change https://developer.mozilla.org/ja/docs/Web/CSS/will-change - We can give a clue to browsers

    about what elements are expected to change - Browsers can set up optimizations before elements are actually changed. - The high-cost processing run potentially, page response can improve.
  19. will-change https://developer.mozilla.org/ja/docs/Web/CSS/will-change - Continue to indicate that the target element

    will be update soon. - To maintain certain optimizations for a long time. - We need to turn will-change on / off using script code before and after the change occurs.
  20. will-change https://developer.mozilla.org/ja/docs/Web/CSS/will-change const el = document.getElementById('element'); el.addEventListener('mouseenter', hintBrowser); el.addEventListener('animationEnd', removeHint);

    function hintBrowser() { // They will be update at key frame block this.style.willChange = 'transform, opacity'; } function removeHint() { this.style.willChange = 'auto'; }
  21. TL; DR - I try to take piece to process

    of rendering , then confirm what the browser do. - Especially, “Paint” process is high cost, so it is better to use “will-change” property. - Notice : Watch out for overuse!