🖥️Browser Rendering Flow

HTML→DOM, CSS→CSSOM, Render Tree, Layout, Paint, Composite. Understanding this pipeline is key to performance optimization.

Memory Trick

HTML → DOM. CSS → CSSOM. Meet in Render Tree → Layout → Paint → Composite. Remember: DOM + CSSOM = Render Tree.

1️⃣ Critical Rendering Path

HTML → DOM Tree
CSS  → CSSOM Tree
        ↓
    Render Tree (DOM + CSSOM, only visible nodes)
        ↓
    Layout (calculate positions/sizes)
        ↓
    Paint (draw pixels)
        ↓
    Composite (layer ordering, GPU)

2️⃣ Reflow vs Repaint

Operation	What triggers it	Cost
Reflow	Geometry changes (width, margin, position)	🔴 Expensive
Repaint	Visual changes (color, background, shadow)	🟡 Moderate
Composite only	transform, opacity	🟢 Cheap

GPU-accelerated properties: transform, opacity. Use these for animations!

css
/* Bad — triggers reflow */
.bad { left: 100px; }

/* Good — GPU compositing only */
.good { transform: translateX(100px); }

3️⃣ Layout Thrashing

Layout thrashing = forcing synchronous layout recalculation by alternating reads and writes.

js
// Bad — causes layout thrashing
elements.forEach(el => {
  el.style.width = container.offsetWidth + 'px'; // read → forces layout
  // ↑ each iteration forces a layout recalc
});

// Good — batch reads then writes
const w = container.offsetWidth; // read once
elements.forEach(el => {
  el.style.width = w + 'px'; // write
});

Was this helpful?

Found an issue? Report here

Test your Knowledge

1 questions to cement what you just learned.