Rendering Cycle

Web browsers perform parsing and rendering. During parsing, it converts bytecode into nodes, and organise them into DOM tree. Then it renders DOM, ie. each presentational node is displayed on screen

Rendering Waterfall CSSOM → Layout → Paint → Composite

• style calculation: CSS rules are applied to nodes to form CSSOM.
• layout creation: calculate position and geometry of elements (vector boxes)
• paint: vector boxes are rasterized (to pixels) and put onto layers . This is done to improve repaints of elements likely to change by isolating changes to specific layer only
• composition : layers are placed in correct order. By default, 1 layer exists.

Layer Creation

Dom changes can be Reflow trigger layout re-creation, Repaint : only pixels are updated or Recompose : seperate layer is changed. Cheapest, uses GPU and run in seperate thread from main

Layer is created for elements with children using new stacking contexts (opacity, transform), 3D stuff ; <canvas> with 3D (WebGL), <video> with accelerated video decoding, CSS filters

To optimise animations, place reflow-repaint properties on separate layer e.g. will-change: color More layers -> more memory (so careful)

CSS Optimisations

<link rel="stylesheet"> tags are render-blocking, until the CSS file is downloaded and parsed. This prevents Flash of Unstyled Content (FOUC) by ensuring styles are ready before HTML is painted

Strategies

• Non critical : load styles via script