How does a browser render a page?
From HTML and CSS bytes to pixels: DOM, CSSOM, render tree, layout, paint and compositing.
Transcript
The browser receives H T M L as raw bytes. It decodes them into characters, then into tokens.
Tokens become nodes, and the nodes form a tree: the D O M.
C S S is parsed the same way, into the C S S O M, a tree of style rules.
It blocks rendering: the browser waits for the styles before it paints anything.
The D O M and the C S S O M combine into the render tree, which holds only what is visible.
The head, and anything with display none, is left out.
Layout works out the size and position of every box, in pixels.
Resize the window, and the browser has to lay everything out again.
Paint turns boxes into pixels: text, colors, borders and images, drawn into layers.
The G P U then composites the layers into the final frame on your screen.
Java Script can change the D O M or the styles, and the pipeline runs again from that step.
Changing transform or opacity only needs compositing, so it is cheap and smooth.
H T M L and C S S become trees, trees become boxes, and boxes become pixels. That is how a browser renders a page.
More in this series
2:03How are web animations turned into videos?
A scene is a function of time: Chromium captures it frame by frame, ffmpeg encodes the video and mixes in the narration.
2:40From typing a URL to seeing the page
DNS, TCP and TLS, a static frontend served from a CDN, one call to a Go API, and the final render.