Critical Rendering Path Deep Dive

The Critical Rendering Path: From Bytes to Pixels

The CRP is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on screen.

The 6 Steps

1. Build the DOM: Parse HTML into a tree of nodes
2. Build the CSSOM: Parse CSS into a style tree
3. Build the Render Tree: Combine DOM + CSSOM (excludes display:none)
4. Layout (Reflow): Calculate exact size and position of every element
5. Paint: Fill in pixels — colors, borders, shadows, text
6. Compositing: Combine painted layers in correct order

Render-Blocking Resources

CSS is render-blocking by default. JavaScript is parser-blocking. Solutions:

• defer: Download in parallel, execute after HTML parsing
• async: Download in parallel, execute immediately (order not guaranteed)

Layout vs Paint vs Composite

Reflow (Expensive)	Repaint (Moderate)	Composite Only (Cheap)
width, height, margin	color, background	transform
display, position	box-shadow	opacity

Animations using transform and opacity are GPU-accelerated and skip Layout and Paint — this is why translateX is 60fps but left causes jank.