From bytes to pixels

The browser receives bytes, but the screen needs pixels. The rendering pipeline connects them.

HTML bytes become tokens and DOM nodes. CSS becomes rules the browser can match against those nodes.

The browser then performs several kinds of work:

1. Style calculation decides which computed values apply.
2. Layout calculates box sizes and positions.
3. Paint records visual instructions for text, backgrounds, borders, and images.
4. Rasterization turns those instructions into pixels.
5. Compositing combines layers into the frame shown on screen.

These stages are dependencies, not a promise that every frame repeats all five. A text change may need style, layout, and paint. A suitable transform animation may need only compositing after initial setup.

JavaScript runs on the main thread with much of style and layout work. A long task can therefore delay pixels even when every network request has finished.

Record a page load in the Performance panel. Find Parse HTML, Recalculate Style, Layout, Paint, and Composite-related activity. Your browser version may label or group events differently, but the causal work remains.

Exercise: change an element’s width, background, and transform separately. Predict the stages each change needs before recording them.