How the Critical Rendering Path Works in Browsers

The critical rendering path is the sequence of steps browser rendering engines execute to convert raw HTML, CSS, and JavaScript files into visible pixels on the screen. This process encompasses five primary stages: constructing the Document Object Model (DOM), building the CSS Object Model (CSSOM), combining them into the Render Tree, calculating the Layout, and Painting the visual elements. Understanding how browsers process each phase is essential for optimizing web page load speeds, minimizing render-blocking resources, and improving overall front-end performance.

1. Document Object Model (DOM) Construction

When a browser receives the initial HTML document via network packets, it processes the raw bytes into the DOM tree through four sequential sub-steps:

  1. Conversion: The browser reads the raw bytes from the disk or network and translates them into individual characters based on the document's specified encoding (such as UTF-8).
  2. Tokenization: The engine parses the character stream into distinct tokens dictated by the W3C HTML5 standard (such as <html>, <body>, and specific tag attributes).
  3. Lexing (Node Creation): Tokens are converted into objects with defined properties and rules, producing individual DOM nodes.
  4. DOM Tree Construction: Because HTML tags define parent-child and sibling relationships, the browser links these nodes into a tree structure that captures the full hierarchy of the document.

The DOM creation is an incremental process; the browser can begin processing parts of the HTML as they arrive over the wire.

2. CSS Object Model (CSSOM) Construction

While the browser processes HTML, it encounters external stylesheet links (<link rel="stylesheet">) and inline <style> tags. The browser requests and reads the raw CSS bytes, translating them through the same conversion, tokenization, and node-creation process used for HTML.

The resulting nodes are linked into the CSSOM, a tree structure mapping style rules to elements. Unlike HTML parsing, CSSOM construction is not incremental. Because styles cascade and inherit downward, the browser cannot use a partial CSSOM; it must process all CSS rules fully before moving to the next stage. As a result, CSS is considered a render-blocking resource.

3. Render Tree Construction

Once the browser has created both the DOM and the CSSOM, it merges them to produce the Render Tree. The Render Tree captures only the nodes required to render the page visually, along with their computed styles.

To build the Render Tree, the engine traverses the DOM from the root and performs two actions:

  • It skips non-visual nodes that do not produce rendered output, such as <head>, <script>, and <meta> tags.
  • It skips elements hidden via CSS rules, such as display: none;. In contrast, elements styled with visibility: hidden or opacity: 0 are retained because they still occupy space in the layout.

Each visible node in the Render Tree is paired with its matching computed CSSOM styles.

4. Layout (Reflow)

With the Render Tree constructed, the browser executes the Layout phase (often referred to as Reflow). During this stage, the engine calculates the exact geometric position, dimensions, and relationship of every visible element relative to the device's viewport.

The browser starts at the root of the Render Tree and works downward, determining box models, margins, padding, line heights, and absolute pixel coordinates. Layout calculations depend directly on viewport dimensions; modifying device orientation, resizing the browser window, or dynamically altering element geometry forces the browser to recalculate these positions.

5. Paint (Rasterization) and Compositing

The final phase transforms the computed layout data into actual pixels on the screen:

  • Painting: The engine divides the Render Tree into visual layers based on styling properties like z-index, transforms, and fixed positioning. It then draws text, colors, borders, shadows, and images onto these individual layers.
  • Compositing: The browser uploads these layers to the GPU. The GPU combines and arranges the layers in the correct stacking order and draws the final image onto the user's screen.

The Role of JavaScript in the Path

JavaScript can query and manipulate both the DOM and CSSOM. When the HTML parser encounters a standard <script> tag, DOM construction pauses immediately while the browser downloads and executes the script.

Furthermore, if the browser is currently downloading or parsing CSS when a script is encountered, it delays script execution until the CSSOM is fully built to ensure the script does not access stale style properties. Modern optimization patterns—such as adding async or defer attributes to scripts, inlining critical CSS, and preloading key assets—prevent JavaScript and CSS from stalling this pipeline, allowing the browser to traverse the critical rendering path as quickly as possible.