Track R

The rendering engine, under the hood

How a page goes from HTML text to pixels: the critical rendering path, DOM and CSSOM construction, selector matching and the cascade, computed style, the render tree, layout, and paint.

1. From bytes to pixels: the critical rendering path

   Between the raw HTML and CSS bytes arriving over the network and the finished image on your screen sits a fixed sequence of construction steps — parse the HTML into a DOM, the CSS into a CSSOM, combine them into a render tree, lay it out, paint it, composite it — and knowing that path explains render-blocking resources, why CSS goes in the head, and where every rendering-performance rule comes from.

   12 min
2. Parsing HTML into the DOM

   The critical rendering path starts by turning a raw byte stream into the DOM tree through a two-phase, fully specified parser that never throws on broken markup — and that same parser can be stopped cold by a single script tag, which is exactly where async and defer come from.

   13 min
3. Parsing CSS into the CSSOM

   While the DOM is being assembled, the browser is running CSS bytes through a parallel pipeline into the CSSOM — but unlike HTML parsing, this one blocks the first paint outright, and understanding why turns into a concrete set of loading optimizations.

   12 min
4. Selector matching and the cascade

   To build the render tree the browser must decide, for every element, which of thousands of CSS rules apply and which one wins, and it does that by matching selectors right to left for speed and then resolving conflicts through the cascade's origin, specificity, and source-order rules.

   13 min
5. Computed style: from matched rules to final values

   Winning the cascade only gives a property one candidate value, and that value still passes through several more processing stages — specified, computed, used, actual — before it becomes something layout can actually place a box with.

   12 min
6. The render tree and layout

   The DOM and the computed styles from the previous lesson combine into a second, smaller tree holding only what will actually be drawn — and layout then walks that tree to compute the exact size and position of every box, which is the moment content and style finally become geometry.

   13 min
7. Paint, layers, and compositing

   With every box's geometry known, the browser still has to turn those boxes into actual pixels, decide which content deserves its own independent compositor layer, and assemble the result into the frame you see — three distinct stages this lesson frames as the last leg of the rendering pipeline.

   12 min
8. Reflow, repaint, and rendering performance

   The critical rendering path from the first lesson doesn't run once and stop — it re-runs, in whole or in part, on every change after the first frame — and rendering performance turns out to mean two separate disciplines, triggering as little of that re-run as possible and not blocking the very first one.

   15 min