Paint vs composite vs layout
Slap yourself if
You say 'reflow' generically or think avoiding layout automatically avoids paint and composite.
Why this exists
Because most frontend performance advice collapses three distinct stages into one mental bucket, leading teams to optimize the wrong phase and see zero improvement.
Mental model
Layout decides geometry, paint produces pixels, composite assembles layers. They are sequentially dependent but independently expensive, and optimizing one does not imply optimizing the others.
- Layout computes element geometry based on DOM and styles.
- Paint rasterizes visual output into bitmaps for each layer.
- Composite combines painted layers into the final frame.
- A change can trigger any subset of these stages.
- Optimizing layout when paint is the bottleneck.
- Assuming transform-only animations skip all expensive work.
- Overusing compositing layers to avoid paint.
- Misreading DevTools timelines and chasing the wrong bar.
Layout computes positions and sizes, paint turns elements into pixels, and composite assembles layers; performance depends on which stages a change invalidates.
- Uses 'reflow' for everything.
- Claims transforms avoid all rendering cost.
- Cannot explain composite-only updates.
- Thinks GPU equals free.
Deep dive
Requires Pro
Premium deep dives include more internals, more scars.