Browsers parse HTML top-to-bottom, building the DOM as they go. CSS can block rendering, and synchronous scripts can block parsing unless deferred or async.
How does the browser handle HTML parsing and rendering order?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
When a browser loads a webpage, it processes the HTML from top to bottom. During this process, it constructs the DOM (Document Object Model), parses CSS into the CSSOM, and then combines both to create the Render Tree.
Step | Process | Description |
|---|---|---|
1 | HTML Parsing | HTML is parsed sequentially into DOM nodes. |
2 | CSS Parsing | CSS files and styles are parsed into the CSSOM. |
3 | Render Tree | DOM and CSSOM are combined to determine what each element looks like. |
4 | Layout (Reflow) | Calculates the position and size of each element. |
5 | Painting | The browser paints pixels on the screen. |
6 | Compositing | Layers are merged and displayed visually. |
Key Behavior Notes
- Scripts (<script>) can block HTML parsing unless marked
asyncordefer. - External CSS blocks rendering until it’s downloaded and parsed.
- Images are fetched asynchronously, but layout space is reserved immediately.
Example Timeline
1️⃣ HTML → DOM
2️⃣ CSS → CSSOM
3️⃣ Combine → Render Tree
4️⃣ Layout & Paint → Final Pixels
Practical scenario
A page loads slowly because large scripts block parsing; understanding the parse/render pipeline helps you move scripts or defer them.
Common pitfalls
- Blocking the parser with synchronous scripts in the head.
- Assuming DOM is ready before it is (missing
deferorDOMContentLoaded). - Confusing DOM parsing with render tree construction.
Inlining critical CSS can speed first paint but hurts caching. Use performance timelines to verify render blocking steps.
Still so complicated?
Think of the browser as an assembly line: first it reads blueprints (HTML + CSS), then builds the model (DOM + CSSOM), then paints it on screen.
Summary
- Parsing HTML builds the DOM.
- Parsing CSS builds the CSSOM.
- Both form the render tree for visual output.
- JavaScript can block rendering if not handled properly.
Similar questions
Guides