What the pipeline does
Every frame a browser shows is the output of a fixed sequence of steps. Understanding the order tells you why some changes are cheap and others are expensive.
The stages
- Parse the HTML into the DOM tree and the CSS into the CSSOM.
- Style combines them, computing the final styles for every element.
- Layout measures where each box goes and how big it is.
- Paint fills in pixels for text, colors, borders, and shadows.
- Composite assembles painted layers into the final image the GPU shows.
Why order matters
The stages run top to bottom. Changing a property that affects geometry, like width, forces layout, then paint, then composite. Changing only transform can skip straight to composite. The earlier the stage you trigger, the more downstream work the browser must redo.
Practical takeaway
When animating, prefer properties handled late in the pipeline. A change that only touches compositing avoids re-measuring and re-painting the whole subtree, keeping frames fast.
Key idea
Pixels come from a fixed pipeline; the earlier the stage you disturb, the more work the browser repeats per frame.