How the Browser Renders
From HTML to pixels on screen
The Request
When you type a URL and press Enter, your browser sends an HTTP request to a web server. The server responds with an HTML file — just a text document containing tags, attributes, and content. But how does the browser turn that text into the interactive, visual page you see?
Browser Rendering Pipeline ────────────────────────────── 1. Parse HTML → DOM tree 2. Parse CSS → CSSOM tree 3. Combine → Render tree 4. Layout → Calculate positions 5. Paint → Draw pixels 6. Composite → Layer composition ────────────────────────────── All of this happens in milliseconds.
HTML Parsing
The browser reads the HTML byte by byte and builds the DOM (Document Object Model) — a tree structure where each HTML element becomes a node.
<html>
<head><title>My Page</title></head>
<body>
<h1>Hello</h1>
<p>World</p>
</body>
</html> DOM Tree:
document
└── html
├── head
│ └── title
│ └── "My Page"
└── body
├── h1
│ └── "Hello"
└── p
└── "World"When the parser encounters a <link> tag referencing a CSS file, it starts downloading and parsing the CSS in parallel. Scripts with <script> tags can block parsing unless marked as async or defer.
Building the CSSOM
The browser parses CSS files and builds the CSSOM (CSS Object Model) — another tree that represents all the styles and how they cascade, inherit, and override each other.
body { font-family: sans-serif; color: #333; }
h1 { font-size: 2rem; color: #1a1a2e; }
p { line-height: 1.6; } CSSOM Tree:
body
├── font-family: sans-serif
├── color: #333
├── h1
│ ├── font-size: 2rem
│ └── color: #1a1a2e (overrides body)
└── p
├── color: #333 (inherited from body)
└── line-height: 1.6The CSSOM must be fully built before the browser can proceed to rendering. This is why CSS is called render-blocking — the page cannot be displayed until all CSS is parsed.
The Render Tree
The browser combines the DOM and CSSOM into a render tree. This tree only contains visible elements — nodes with display: none are excluded, as are <head>, <script>, and other non-visual elements.
Render Tree (DOM + CSSOM):
──────────────────────────
body { font: sans-serif, color: #333 }
├── h1 { font-size: 2rem, color: #1a1a2e }
│ └── "Hello"
└── p { line-height: 1.6, color: #333 }
└── "World"
NOT included:
✗ <head>, <title> (not visual)
✗ <script> (not visual)
✗ display: none (explicitly hidden)Layout & Paint
Layout (also called "reflow") calculates the exact position and size of every element on the page. The browser walks the render tree, computing widths, heights, margins, and positions.
Paint fills in every pixel. Text gets rasterized, colors are applied, borders drawn, shadows computed. The browser paints onto layers, which are then composited together by the GPU.
Layout: "WHERE does each box go?" ───────────────────────────────── body → x:0 y:0 w:1200 h:800 h1 → x:16 y:16 w:1168 h:48 p → x:16 y:80 w:1168 h:28 Paint: "WHAT does each pixel look like?" ───────────────────────────────── Draw text "Hello" at (16,16) size 2rem color #1a1a2e Draw text "World" at (16,80) size 1rem color #333333
Performance tip
Changing layout properties (width, height, margin) triggers reflow + repaint. Changing only visual properties (color, background) triggers repaint only. Changing transform or opacity only triggers compositing — the fastest path.
Summary
Every time you load a web page, the browser performs this rendering pipeline in milliseconds. Understanding it helps you write faster, more efficient HTML and CSS.
DOM + CSSOM = Render Tree
HTML creates the DOM, CSS creates the CSSOM, and together they form the render tree containing only visible elements with their computed styles.
CSS is render-blocking
The browser cannot display anything until all CSS is parsed. Keep your CSS small and load critical styles first.
Minimize reflows
Prefer transform and opacity for animations — they skip layout and paint, using the GPU compositor directly.