Critical Rendering Path

All Articles (12 articles)

• Critical Rendering Path: Rendering Pipeline Overview

  Browser & Runtime Internals / Critical Rendering Path 14 min read

  The browser’s rendering pipeline transforms HTML, CSS, and JavaScript into visual pixels through a series of discrete, highly optimized stages. Modern browser engines like Chromium employ the RenderingNG architecture—a next-generation rendering system developed between 2014 and 2021—which decouples the main thread from the compositor and GPU processes to ensure 60fps+ performance and minimize interaction latency.

• Critical Rendering Path: DOM Construction

  Browser & Runtime Internals / Critical Rendering Path 13 min read

  How browsers parse HTML bytes into a Document Object Model (DOM) tree, why JavaScript loading strategies dictate performance, and how the preload scanner mitigates the cost of parser-blocking resources.

• Critical Rendering Path: CSSOM Construction

  Browser & Runtime Internals / Critical Rendering Path 10 min read

  The CSS Object Model (CSSOM) is the browser engine’s internal representation of all CSS rules—a tree structure of stylesheets, rule objects, and declaration blocks. Unlike DOM construction, which is incremental, CSSOM construction must complete entirely before rendering can proceed. This render-blocking behavior exists because the CSS cascade requires the full rule set to resolve which declarations win.

• Critical Rendering Path: Style Recalculation

  Browser & Runtime Internals / Critical Rendering Path 10 min read

  Style Recalculation transforms the DOM and CSSOM into computed styles for every element. The browser engine matches CSS selectors against DOM nodes, resolves cascade conflicts, and computes absolute values—producing the ComputedStyle objects that the Layout stage consumes. In Chromium’s Blink engine, this phase is handled by the StyleResolver, which uses indexed rule sets, Bloom filters, and invalidation sets to minimize work on each frame.

• Critical Rendering Path: Layout Stage

  Browser & Runtime Internals / Critical Rendering Path 12 min read

  Layout is the rendering pipeline stage that transforms styled elements into physical geometry—computing exact pixel positions and sizes for every visible box. In Chromium’s LayoutNG architecture, this stage produces the Fragment Tree, an immutable data structure describing how elements are broken into boxes (fragments) with resolved coordinates.

• Critical Rendering Path: Prepaint

  Browser & Runtime Internals / Critical Rendering Path 14 min read

  Prepaint is a RenderingNG pipeline stage that performs an in-order traversal of the LayoutObject tree to build Property Trees and compute paint invalidations. It decouples visual effect state (transforms, clips, filters, scroll offsets) from the paint and compositing stages, enabling compositor-driven animations and off-main-thread scrolling.

• Critical Rendering Path: Paint Stage

  Browser & Runtime Internals / Critical Rendering Path 11 min read

  The Paint stage records drawing instructions into display lists—it does not produce pixels. Following Prepaint (property tree construction and invalidation), Paint walks the layout tree and generates a sequence of low-level graphics commands stored in Paint Artifacts. These artifacts are later consumed by the Rasterization stage, which executes them to produce actual pixels on the GPU.

• Critical Rendering Path: Commit

  Browser & Runtime Internals / Critical Rendering Path 12 min read

  Commit is the synchronization point where the Main Thread hands over processed frame data to the Compositor Thread. This blocking operation ensures the compositor receives an immutable, consistent snapshot of property trees and display lists—enabling the dual-tree architecture that allows rasterization to proceed independently while the main thread prepares the next frame.

• Critical Rendering Path: Layerize

  Browser & Runtime Internals / Critical Rendering Path 9 min read

  The Layerize stage converts paint chunks into composited layers (cc::Layer objects), determining how display items should be grouped for independent rasterization and animation. This process happens after Paint produces the paint artifact and before Rasterization converts those layers into GPU textures.

• Critical Rendering Path: Rasterization

  Browser & Runtime Internals / Critical Rendering Path 10 min read

  Rasterization is the process where the browser converts recorded display lists into actual pixels—bitmaps for software raster or GPU textures for hardware-accelerated paths. This stage marks the transition from abstract paint commands to concrete visual data. In Chromium, rasterization is managed by the compositor thread and executed by worker threads, ensuring smooth interactions even when the main thread is saturated with JavaScript or layout work.

• Critical Rendering Path: Compositing

  Browser & Runtime Internals / Critical Rendering Path 13 min read

  How the compositor thread assembles rasterized layers into compositor frames and coordinates with the Viz process to display the final pixels on screen.

• Critical Rendering Path: Draw

  Browser & Runtime Internals / Critical Rendering Path 12 min read

  The Draw stage is the final phase of the browser’s rendering pipeline. The Viz process (Visuals) in Chromium takes abstract compositor frames—consisting of render passes and draw quads—and translates them into low-level GPU commands to produce actual pixels on the display.