Browser Rendering Pipeline
Walk DOM, style, layout, paint and composite, and see which property changes skip which stages.
What you'll learn
- Name each stage of the pixel pipeline
- Predict whether a style change triggers layout, paint or only composite
Interactive laboratory
Controls
Frame timings are measured, not modelledPlayground
the animated elementProperty under test: width
Conceptual pipeline
expected path, not a guarantee- JavaScriptexpected
- Styleexpected
- Layoutexpected
- Paintexpected
- Compositeexpected
Browsers can combine, skip or reorder this work. Treat it as a mental model and confirm with measurement.
- Frames observed
- -
- Avg frame interval
- -
- Longest frame
- -
- Frames > 32 ms
- -
Comparison
measured per operationRun at least two operations to compare.
What happened?
No measurement yet. Run an operation to collect frame timings.
The stage list is conceptual. Animating a geometric property such as width generally forces layout and repaint of affected content, while transform and opacity can often be handled at composite time. That is a tendency, not a rule: transform is not automatically faster, and on an idle machine with a small element you may see identical frame timings here.
Run a second operation to compare measured frame behaviour.
Why it happened
Every visual change travels through a fixed sequence of stages before pixels appear.
Knowing which stages a change triggers is the basis of animation performance.
Key takeaways
- transform and opacity can skip layout and paint
- Layout thrashing comes from interleaving reads and writes
Tags
- rendering
- layout
- paint
- composite