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!

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
    3FGFS
    UP
    $440.
    USFF
    GPS
    FMFNFOUT
    PG
    %0.
    USFF
    XJUI
    CSVUF
    GPSDF
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. 1JYFM
    1JQFMJOF Style Layout Paint Composite JavaScript https://developers.google.com/web/fundamentals/performance/rendering &BDI
    PG
    UIFTF
    FMFNFOUT
    4PNFUJNFT
    QSPDFTTJOH
    PDDVST
    BOE
    OPU
    PDDVS
    
 *G
    XF
    VOEFSTUBOE
    UIF
    USJHHFS
    PG
    FBDI
    QSPDFTT
    8F
    QSPWJEF
    B
    NPSF
    DPNGPSUBCMF
    FYQFSJFODF
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. 5P
    UIJOL
    PVU
    UIF
    QSPDFTT
    XJUI
    UIF
    IJHIFTU
    DPTU
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