How Browsers Render Pages — DOM, CSSOM, Paint, Composite

"What happens between HTML arriving and pixels appearing?" — the question that reveals whether performance advice is memorized or understood.

The pipeline

1. Parse HTML → DOM (pausing at sync scripts!)
2. Parse CSS → CSSOM — CSS is render-blocking: no pixels until it's ready
3. DOM + CSSOM → Render tree (visible elements with computed styles)
4. Layout (reflow): calculate every box's position and size
5. Paint: fill in pixels — text, colors, shadows
6. Composite: layers assembled on the GPU

Why this explains all the advice

• defer on scripts → parsing never pauses (step 1)
• Minimal critical CSS → step 2 unblocks faster → faster first paint
• Changing width → relayout + repaint + composite (expensive, cascades to children)
• Changing color → repaint + composite (medium)
• Changing transform/opacity → composite ONLY — GPU moves an existing layer. That's the whole "only animate transform" rule, derived instead of memorized

Seeing it live

DevTools → Performance → record a page load: parse, layout (purple), paint (green) laid out on a timeline. Rendering tab → "Paint flashing" highlights repaints as you interact — watching a janky animation light the whole screen green is the lesson that sticks.