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.
How a Page Renders: Parsing DOM CSSOM Layout Paint is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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'Step 2 — Parsing CSS: Building the CSSOM
Simultaneously, CSS bytes are parsed into the CSS Object Model (CSSOM) — a tree of style rules. CSS is render-blocking: the browser won't paint pixels until it has computed styles for the visible content.
Step 3 — The Render Tree
The browser combines the DOM and CSSOM into the Render Tree. Only visible nodes are included — elements with display:none are excluded. Each node in the render tree holds the computed style it will be painted with.
Step 4 — Layout (Reflow)
Layout calculates the exact position and size of every node in the render tree using the box model and the viewport width. This is also called reflow. Layout is expensive; avoid triggering it repeatedly in JavaScript.
Step 5 — Painting
Painting converts the layout into actual pixels on the screen. The browser draws backgrounds, borders, text, and images layer by layer. Some elements create their own compositing layers for GPU-accelerated rendering.
Step 6 — Compositing
The browser's compositor combines the painted layers into the final frame and sends it to the screen. Using transform and opacity for animations lets the compositor run them on the GPU, skipping layout and paint entirely.
What Blocks Rendering?
CSS in the <head> is render-blocking. JavaScript by default is both parser-blocking and render-blocking. Use defer on script tags to parse the JS after HTML without blocking rendering.
<script src="app.js" defer></script>Critical Rendering Path
The Critical Rendering Path is the sequence from receiving HTML bytes to displaying the first pixel. Optimising it means minimising the number and size of render-blocking resources and deferring non-critical JS and CSS.
Reflow vs Repaint
Changing layout properties (width, margin, position) triggers a reflow + repaint. Changing visual-only properties (color, background) only triggers a repaint. Changing transform/opacity triggers only compositing. Prefer the cheapest operation.
DevTools: See the Paint Timeline
In Chrome DevTools, open the Performance panel, record a page load, and inspect the waterfall. You'll see the green Painting events and can identify which elements cause expensive layouts.
Quick Check
Which step calculates the exact size and position of each element on the page?
Recap: The Rendering Pipeline
HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite. Each step feeds the next. Optimising the critical rendering path means shortening this pipeline so the first visible content appears as fast as possible.
Frequently asked questions
Is the “How a Page Renders: Parsing DOM CSSOM Layout Paint” lesson free?
Yes — the full text of “How a Page Renders: Parsing DOM CSSOM Layout Paint” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “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. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “How a Page Renders: Parsing DOM CSSOM Layout Paint” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
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