ClientFoundationsexecution

Trace a Browser Rendering a Page

Follow a browser from receiving HTML through DOM construction, style calculation, layout, and the final paint.

The Runtime Theory TeamSeptember 26, 20261 min read10 steps

layer stack

Client

HWHardware

KKernel

RTRuntime

APPApplication

SYSSystem

CLIClient

NETNetwork

TLSCrypto

SRVServer

Go higherTrace a Market Order Execution

trace spine

01 Browser receives HTML bytes over the network
02 HTML parser tokenizes bytes into DOM nodes
03 CSS parser tokenizes bytes into CSSOM nodes
04 DOM and CSSOM are merged into the Render Tree
05 Layout engine calculates geometry for every element
06 Rasterizer converts elements into pixels
07 Compositor composites pixel layers onto the screen
08 JavaScript blocks rendering until it finishes executing
09 DOMContentLoaded fires — page is structurally complete
10 load event fires — all resources downloaded

▸ On this page

Trace: Browser Renders a Page

The Critical Rendering Path

mermaid

graph LR
  A[Network] --> B[DOM Construction]
  C[Network] --> D[CSSOM Construction]
  B --> E[Render Tree]
  D --> E
  E --> F[Layout]
  F --> G[Paint]
  G --> H[Composite]

Key Takeaways

CSS is render-blocking: the browser waits for CSSOM before building the Render Tree.
JavaScript is parser-blocking: executing JS can modify the DOM, so the parser pauses.
Layout is expensive: reading element geometry triggers a recalculation of the entire Render Tree.
Paint is expensive: rasterizing pixels is costly, especially for large viewports.

plaintext

Same subsystem, other altitudes

Application · executionTrace a Function Call in C++Follow the call stack as main calls a function, a local variable is created, and the stack frame is pushed and popped.System · executionTrace a Market Order ExecutionFollow a market order as it arrives at the exchange, matches against the top of the order book, and produces a trade.Application · executionTrace a Linear SearchFollow a linear search across 10 array elements, checking each one until the target is found or the array is exhausted.

One dispatch a week

If tracing at this altitude interests you, subscribe. One technical explanation per week — no noise, no course spam.

One technical dispatch per week. No noise.

Not started