Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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!

Slide 4

Slide 4 text

Scope DISPLAY Communication

Slide 5

Slide 5 text


Slide 6

Slide 6 text

Slowly Laggy Don’t show Affected

Slide 7

Slide 7 text

What is SLOW?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

FPS - Frame (s) per second - 60f / s - Budget : 16.6msec / frame - Rendering + Housekeeping A certain time = Rendering : 10 msec +α

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Pixel Pipeline Style Layout Paint Composite JavaScript

Slide 13

Slide 13 text

JavaScript - Update html string template - Event occurrence and display element state change.

Slide 14

Slide 14 text

Style - Check which element (s) the CSS rule matches. - Apply rules and reflect in drawing. 1SPCMFN 3FGFSUP$440.USFFGPSFMFNFOUTPG%0.USFFXJUI CSVUFGPSDF

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

Paint - List making - List : Operations to call when drawing to screen with graphics API. - Perform pixel embedding - Rasterization - Covert data to dot-sets

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text


Slide 21

Slide 21 text

Full Style Layout Paint Composite JavaScript

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Skip Layout Style Layout Paint Composite JavaScript

Slide 24

Slide 24 text

Update color - Update background-image, text color, shadow. - They do not affect page layout.
 -> Skip layout

Slide 25

Slide 25 text

Skip paint too Style Layout Paint Composite JavaScript

Slide 26

Slide 26 text

Update cursor - No effect (basically…) - Note : depending on brows

Slide 27

Slide 27 text

Triggers = CSS property

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text


Slide 30

Slide 30 text

Pixel Pipeline Style Layout Composite JavaScript Paint

Slide 31

Slide 31 text

Problem - 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…

Slide 32

Slide 32 text

Slide 33

Slide 33 text Understand stacking context By giving a hint in advance Browser is ready → HOW?

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

CSS Triggers

Slide 37

Slide 37 text

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 = 'transform, opacity'; } function removeHint() { = 'auto'; }

Slide 38

Slide 38 text

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!

Slide 39

Slide 39 text

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