How a Page Renders: Parsing DOM CSSOM Layout Paint
See what the browser does with the HTML and CSS bytes: building the DOM, the CSSOM, calculating layout, and painting pixels.
From Bytes to Pixels
When the browser receives HTML bytes from the server, a multi-step process converts them into the pixels you see on screen. Knowing this pipeline helps you optimise performance and understand what causes visual glitches.
Step 1 — Parsing HTML: Building the DOM
The browser's HTML parser reads the byte stream and constructs the Document Object Model (DOM) — a tree of nodes representing every HTML element, text node, and comment in the document.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'All lessons in this course
- Browsers DNS and HTTP: The Request Lifecycle
- HTML CSS and JavaScript: Each Layer's Job
- How a Page Renders: Parsing DOM CSSOM Layout Paint
- Developer Tools: Opening and Using DevTools