How the Browser Renders a Page

The critical rendering path — DOM, CSSOM, render tree, layout, paint, composite — and why transform beats top

1 / 27

steps

Act 1 of 8·Bytes to Tokens

step 1

index.html — bytes off the wire

01<body>

02 <h1>Hello</h1>

03 <p class="note">Web page</p>

04 <div class="ad">Ad</div>

05</body>

HTML parsing is incremental — the browser starts building before the last byte arrives

Speednormal

The server sends back a stream of bytes. Before anything can be drawn, the browser has to turn those bytes into structure. It decodes them to characters using the declared encoding, then hands them to the HTML tokenizer. Nothing on screen yet — this is a tiny page, but every page starts exactly here.

Pipeline stage

Parse HTML→ DOM

Parse CSS→ CSSOM

Render treevisible only

Layoutgeometry · reflow

Paintpixels · repaint

CompositeGPU layers

Active Recall

Question 1 / 3

Which pair of CSS properties can be animated without triggering layout or paint?

Under the Hood

Loading visualizer…

DNSresolving host

TCPconnecting

TLShandshake

HTTPrequesting

DSAverse

How the Browser Renders a Page

How the Browser Renders a Page