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

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

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!

Scope DISPLAY Communication

Affected RUNTIME PAGE LOAD

Slowly Laggy Don’t show Affected

What is SLOW?

SLOW is - If the execution time has passed after a certain time. - A certain time is ?

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

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.

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, Ұ෦มߋ

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

JavaScript - Update html string template - Event occurrence and display element state change. https://developers.google.com/web/fundamentals/performance/rendering

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

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

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

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

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

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

1JYFM1JQFMJOF Style Layout Paint Composite JavaScript https://developers.google.com/web/fundamentals/performance/rendering &BDIPGUIFTFFMFNFOUT 4PNFUJNFTQSPDFTTJOHPDDVSTBOEOPUPDDVS 
 *GXFVOEFSTUBOEUIFUSJHHFSPGFBDIQSPDFTT 8FQSPWJEFBNPSFDPNGPSUBCMFFYQFSJFODF

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

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

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

Update color - Update background-image, text color, shadow. - They do not affect page layout.
 -> Skip layout https://developers.google.com/web/fundamentals/performance/rendering

Skip paint too Style Layout Paint Composite JavaScript https://developers.google.com/web/fundamentals/performance/rendering

Update cursor - No effect (basically…) - Note : depending on brows https://developers.google.com/web/fundamentals/performance/rendering

Triggers = CSS property

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/

5PUIJOLPVUUIFQSPDFTTXJUI UIFIJHIFTUDPTU

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

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…

https://developers.google.com/web/fundamentals/performance/rendering

https://developers.google.com/web/fundamentals/performance/rendering Understand stacking context By giving a hint in advance Browser is ready → HOW?

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.

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.

CSS Triggers https://developer.mozilla.org/ja/docs/Web/CSS/will-change

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'; }

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!

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