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

Take rendering process to pieces for Web browser performance.

4f5d4dca90d62d99e1f610fbc5582c0f?s=47 plum
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!

4f5d4dca90d62d99e1f610fbc5582c0f?s=128

plum

October 22, 2019
Tweet

Transcript

  1. Take rendering process to pieces for Web browser performance. @plum_shiga

  2. IAM @plum_shiga Programmer - From electrical control
 to Web service.

  3. 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!
  4. Scope DISPLAY Communication

  5. Affected RUNTIME PAGE LOAD

  6. Slowly Laggy Don’t show Affected

  7. What is SLOW?

  8. SLOW is - If the execution time has passed after

    a certain time. - A certain time is ?
  9. 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
  10. 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.
  11. 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, Ұ෦มߋ
  12. Pixel Pipeline Style Layout Paint Composite JavaScript https://developers.google.com/web/fundamentals/performance/rendering

  13. JavaScript - Update html string template - Event occurrence and

    display element state change. https://developers.google.com/web/fundamentals/performance/rendering
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 1JYFM1JQFMJOF Style Layout Paint Composite JavaScript https://developers.google.com/web/fundamentals/performance/rendering &BDIPGUIFTFFMFNFOUT 4PNFUJNFTQSPDFTTJOHPDDVSTBOEOPUPDDVS 


    *GXFVOEFSTUBOEUIFUSJHHFSPGFBDIQSPDFTT 8FQSPWJEFBNPSFDPNGPSUBCMFFYQFSJFODF
  21. Full Style Layout Paint Composite JavaScript https://developers.google.com/web/fundamentals/performance/rendering

  22. 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
  23. Skip Layout Style Layout Paint Composite JavaScript https://developers.google.com/web/fundamentals/performance/rendering

  24. Update color - Update background-image, text color, shadow. - They

    do not affect page layout.
 -> Skip layout https://developers.google.com/web/fundamentals/performance/rendering
  25. Skip paint too Style Layout Paint Composite JavaScript https://developers.google.com/web/fundamentals/performance/rendering

  26. Update cursor - No effect (basically…) - Note : depending

    on brows https://developers.google.com/web/fundamentals/performance/rendering
  27. Triggers = CSS property

  28. 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/
  29. 5PUIJOLPVUUIFQSPDFTTXJUI UIFIJHIFTUDPTU

  30. Pixel Pipeline Style Layout Composite JavaScript https://developers.google.com/web/fundamentals/performance/rendering Paint

  31. 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…
  32. https://developers.google.com/web/fundamentals/performance/rendering

  33. https://developers.google.com/web/fundamentals/performance/rendering Understand stacking context By giving a hint in advance

    Browser is ready → HOW?
  34. 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.
  35. 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.
  36. CSS Triggers https://developer.mozilla.org/ja/docs/Web/CSS/will-change

  37. 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'; }
  38. 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!
  39. Take rendering process to pieces for Web browser performance. @plum_shiga