Rendering Cycle

Web browsers perform two main tasks: parsing and rendering. During parsing, it converts bytecode into nodes, and organise them as DOM. 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.

3 types of UI change

• Reflow : trigger layout re-creation. Expensive process.
• Repaint : only pixels are updated
• Recompose : seperate layer is changed. e.g. opacity, transform. Cheapest, uses GPU and run in seperate thread from main

Layer creations happen for

• container whose child has layer ; new stacking contexts
• 3D stuff ; <canvas> with 3D (WebGL)
• <video> with accelerated video decoding
• accelerated CSS filters