Software / Browser

The render pipeline

A change becomes pixels in stages. Some stages can be skipped. Knowing which one you touched is the performance question.

*[render_pipeline]
layout paint composite CRP

Browser Render Pipeline

Which pipeline stages a CSS property triggers determines its cost. Properties like transform and opacity on composited layers skip layout and paint entirely — the GPU reassembles pre-rasterized layers. Properties like width invalidate all stages.

Browser Render Pipeline Stages: HTML + CSS are parsed into DOM and CSSOM; merged into the Render Tree; Layout computes geometry (reflow); Paint rasterizes pixels per layer; Composite assembles layers on the GPU and outputs to screen. transform/opacity trigger composite only (cheap fast path). width/height/top trigger layout + paint + composite (expensive). HTML + CSS DOM CSSOM Render Tree excludes display:none Layout (reflow) Paint (rasterize) Composite (GPU layers) Screen transform / opacity → composite only (fast path) width / top / font-size → layout + paint + composite (expensive) Forced sync layout: reading offsetWidth after a write flushes the pipeline. Batch reads before writes in rAF.
DOM

Document Object Model

Live tree of nodes. Script mutations trigger style recalc. documentFragment batches insertions off-tree. TreeWalker traverses efficiently. Range works across arbitrary node boundaries. MutationObserver callbacks fire as microtasks.

  • Node
  • Element
  • DocumentFragment
  • TreeWalker
  • Range
  • MutationObserver
DOM reference WHATWG DOM Living Standard
CSSOM

CSSOM + Cascade

Style resolution order: origin → cascade layers → specificity → source order. getComputedStyle returns resolved values (forces style flush). @layer adds an explicit origin tier — which rule wins, not which file is requested. Delivery is a separate schedule. @property enables typed custom properties with registered syntax.

  • @layer
  • specificity
  • @property
  • :is() :where()
  • custom properties
CSSOM Cascade Level 5
layout

Layout (Reflow)

Computes box geometry. Reading layout properties (offsetWidth, getBoundingClientRect) after mutations forces a synchronous reflow. contain: layout limits reflow scope. ResizeObserver fires before paint after each reflow.

  • contain: layout
  • will-change
  • ResizeObserver
  • intrinsic sizing
Reflow CSS Containment
composite

Compositing Layers

transform, opacity, and filter on a promoted layer skip layout and paint — the GPU reassembles pre-rasterized bitmaps. will-change: transform promotes eagerly (memory cost). content-visibility: auto skips layout/paint for off-screen content.

  • will-change
  • GPU layer
  • content-visibility
  • isolation: isolate
Animation performance content-visibility