Lesson 18 · Motion and scale

How the browser renders: style, layout, paint

Follow one small card from code to pixels. The browser turns the DOM and the CSSOM into a frame in four stages: style works out every element's values, layout sizes and places each box, paint fills the pixels into layers, and composite puts the layers on the screen. Then change three properties and watch each one rerun only the stages it needs: width all four, background skips layout, translate skips layout and paint.

12 min10 steps5 questionsAdvanced

Fig 18 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01Which stage works out how big each box is and where it sits?

Style works out the values (width: 200px), but layout turns them into geometry: the card's box is 200 by 40 CSS pixels at x 8, y 8.

02The CSS has p { display: none; }. What happens to the p element?

Style still works out its values (that is how the browser learns display is none), but display: none generates no box, so nothing later in the pipeline sees it.

03You change an element's background from gold to tomato. Which stages run again?

A new colour does not change any box's size or place, so layout is skipped; the changed pixels must be painted again and composited.

04Why do smooth animations usually change transform (or translate) and opacity rather than width or left?

Changing width reruns layout, then paint and composite, on every frame. A transform moves an already painted layer, which the compositor can do on its own.

05On a 60 Hz screen, about how long does the browser have to produce each frame?

60 frames each second leaves 1000 ÷ 60 ≈ 16.7 ms per frame, for every stage the change reruns plus the browser's other work.

Key terms

Glossary

Rendering pipeline: The stages the browser runs to turn the DOM and the CSSOM into pixels on the screen: style, layout, paint and composite.
CSSOM: The CSS Object Model: the browser's tree of the rules in a page's stylesheets, built by parsing the CSS.
Computed style: The final value of every property for one element, after matching the rules, the cascade and the defaults.
Layout: The stage that works out each box's size and position on the page. Running it again is often called reflow.
Paint: The stage that draws each box's pixels (backgrounds, borders, text) into layers, in a fixed order.
Layer: A painted picture of part of the page, kept off screen so the compositor can move or fade it without painting again.
Composite: The stage that stacks the painted layers in order, applies transform and opacity, and hands the finished frame to the screen.
Frame budget: The time the browser has for each frame: about 16.7 ms on a 60 Hz screen.

Fine print

Notes and sources

Each browser engine has its own names and extra stages (Chrome, for example, splits paint into recording and rasterising, and running layout again is often called reflow), but every one runs style, layout, paint and composite in this order.
Whether a translate or transform change also skips paint depends on the element having its own compositor layer. Browsers usually give one to an element while its transform or opacity is animating, and will-change: transform asks for it ahead of time.
translate is one of the individual transform properties; translate: 40px moves the box exactly like transform: translateX(40px).
The figure shows one element; a real page runs each stage over every box. The text position inside the card is drawn approximately. The full index.html also has <!DOCTYPE html>, <head> with a <title> and the <link rel="stylesheet" href="style.css">, and <body>.

Quiz Unlocks after the last step.