How does a web browser render an HTML document

The browser parses HTML into the DOM tree incrementally as bytes are received. 2. External resources like CSS and JavaScript are loaded asynchronously, with CSS being render-blocking and regular JavaScript being parser-blocking. 3. CSS is parsed into the CSSOM, a tree of styling rules that, combined with the DOM, forms the render tree. 4. The render tree is constructed using only visible elements and their computed styles. 5. Layout (or reflow) calculates the exact position and size of each element starting from the root. 6. Painting converts the render tree into pixel data by drawing text, colors, borders, and other visual elements on layers. 7. Compositing combines these layers in the correct order to produce the final screen image efficiently. The entire rendering pipeline—parsing, constructing trees, layout, painting, and compositing—occurs in milliseconds and repeats on changes, enabling fast, interactive web pages.

When you open a web page, your browser goes through a series of steps to turn raw HTML (and related resources like CSS and JavaScript) into a fully rendered, interactive page. This process is called the rendering pipeline. Here's how a web browser renders an HTML document:

1. Parsing HTML into the DOM

The first step is reading the HTML file and converting it into a structured format the browser can work with: the Document Object Model (DOM).

• The browser reads the HTML byte by byte and parses it into tokens (like <div>, <code>, attributes, text).
• These tokens are then turned into nodes, which are organized into a tree structure called the DOM tree.
• The DOM represents the document’s structure and content and is accessible via JavaScript.

Note: The DOM is built incrementally. As soon as chunks of HTML are downloaded, parsing begins — it doesn’t wait for the entire file.



---

2. Loading External Resources

While parsing HTML, the browser encounters references to external resources:

• CSS files (<link rel="stylesheet">)
• JavaScript files (<script src="..."></script>)
• Images, fonts, etc.

These are downloaded asynchronously (in parallel), but:


• CSS is render-blocking: The browser waits to render until CSS is parsed because styles affect layout.
• JavaScript is parser-blocking (by default): When the parser hits a regular <script></script> tag, it pauses HTML parsing to fetch and execute the script — unless the script uses async or defer.

---

3. Parsing CSS and Constructing the CSSOM

The browser parses CSS (from external files, <style></style> tags, or inline styles) into the CSS Object Model (CSSOM).

• The CSSOM is a tree-like structure that maps CSS rules to elements.
• Unlike the DOM, the CSSOM is not public, but it determines how elements are styled.
• It’s also render-blocking, meaning the browser won’t paint anything until the CSSOM is ready.

Together, the DOM and CSSOM form a render tree.

---

4. Constructing the Render Tree

The browser combines the DOM and CSSOM to create the render tree:

• Includes only visible elements (e.g., excludes display: none or <script></script>, <meta>).
• Each node in the render tree has computed styles (after resolving inheritance, cascading, etc.).
• This tree represents what will actually be painted on screen.

---

5. Layout (Reflow)

Now that the browser knows which elements to render and their styles, it calculates:

• Where each element should appear on the page (position, size).
• This process is called layout or reflow.
• It starts from the root of the render tree (usually the element) and recursively computes geometry for each node.

This step is computationally expensive, especially for complex layouts.

---

6. Painting (Rasterization)

After layout, the browser paints the pixels:

• The render tree is broken down into layers.
• Each layer is painted into a bitmap (a pixel-based image) in memory.
• This involves drawing text, colors, borders, shadows, etc.
• Modern browsers may split content into multiple layers for performance (e.g., using will-change or transform).

---

7. Compositing

Finally, the browser composites the painted layers:

• Layers are drawn in the correct order to form the final screen image.
• This step handles overlapping elements, transparency, z-index, etc.
• It’s optimized so that only changed layers are repainted or recomposited (e.g., during animations).

---

Bonus: JavaScript’s Impact

JavaScript can interrupt or modify this entire process:

• Scripts can read or modify the DOM and CSSOM.
• Calling methods like window.getComputedStyle() or offsetHeight forces the browser to synchronously perform layout — potentially causing performance issues if done repeatedly.

---

Summary of the Rendering Pipeline

1. Parse HTML → Build DOM
2. Parse CSS → Build CSSOM
3. Combine DOM CSSOM → Render Tree
4. Layout: Compute geometry
5. Paint: Convert to pixels
6. Composite: Layer and display final output

---

This entire process happens very quickly — often in milliseconds — and can repeat whenever changes occur (e.g., user interaction, JavaScript updates). Understanding this flow helps developers write faster, more efficient web pages.

Basically, rendering is the browser’s way of turning code into something you can see and interact with.