The browser rendering lifecycle.
stand between “you press Enter” and “the page responds to your click”. Each one is a distinct piece of work the browser does, often in parallel, frequently misunderstood. Step through them in order, or jump straight to the one you care about.
- 1URL bar to IP address
When you visit a website like this one, before rendering anything, the browser must determine the actual location of
rendermodes.comon the internet. - 2TCP and TLS handshakes
The browser opens a reliable, encrypted channel before it dares to send the request.
- 3HTTP request and response
The browser asks for the page. The server replies with a stream of bytes.
- 4HTML parsing
Bytes become tokens. Tokens become nodes. Nodes become a tree.
- 5CSS parsing & CSSOM
Stylesheets become a structured model the renderer can query.
- 6JavaScript loading & execution
Scripts download, parse, compile, and run. The cost is everywhere.
- 7DOM construction
The HTML parser's output: a tree of nodes that scripts and styles both target.
- 8Render tree
DOM ∩ CSSOM. Only nodes that will actually paint make it in.
- 9Layout
Every box gets a size and a position. Most rendering bugs live here.
- 10Painting
The boxes get filled in with pixels: text, colors, borders, shadows.
- 11Compositing
The compositor stacks all the painted layers into the final image.
- 12Hydration & interactivity
The page is visible, but lifeless, until JavaScript wakes it up.