← Back to Engine

Critical Rendering Path (CRP)


The Critical Rendering Path is the sequential pipeline used by browser engines (V8/Blink, Gecko, WebKit) to convert HTML, CSS, and JS into physical pixels on screen.

Pixel Cat

1. The 5 CRP Pipeline Stages

  1. DOM Construction: Bytes -> Characters -> Tokens -> Nodes -> DOM Tree.
  2. CSSOM Construction: CSS bytes parsed into CSS Object Model.
  3. Render Tree: Combines DOM + CSSOM (excluding display: none nodes).
  4. Layout (Reflow): Calculates exact viewport coordinates and bounding box dimensions.
  5. Paint & Composite: Fills pixels across raster layers and composites onto GPU.

2. Reflow vs Repaint Performance

  • Reflow (Costly): Triggered by geometry changes (width, height, offsetTop). Recalculates layout for affected nodes and their descendants.
  • Repaint (Cheaper): Triggered by visual changes (color, visibility). Updates pixels without recalculating dimensions.
  • GPU Composite (Fastest): Properties like transform and opacity run directly on the GPU without triggering reflow or repaint!
Critical Rendering Path Diagram
3-step DOM creation process

The Challenge: Batch DOM Renderer

Implement batchDomOperations(container, items) using document.createDocumentFragment(). It must append element items to the fragment first, attach the fragment to container in one call, and return { usedFragment: true }.