DOM Reflow, Repaint & Browser Rendering Pipeline

Modern web performance starts with understanding how the browser actually turns your HTML, CSS, and JavaScript into pixels on the screen. This lesson reveals the rendering pipeline, reflow/repaint costs, and professional optimization techniques used by Meta, Google, Netflix, and Airbnb.

🚀 The Browser Rendering Pipeline

The browser doesn't magically draw pixels. It follows a detailed sequence every frame:

🟥 What Causes Reflow (Most Expensive)

Reflow recalculates layout—the most expensive operation. Common triggers:

• Changing element size: width, height
• Changing margin, padding, border
• Changing font-size
• Adding/removing elements
• Changing position, display, flex, grid
• Setting scroll position
• Querying layout properties (forced reflow)

element.offsetHeight
element.offsetWidth
element.scrollTop
element.getBoundingClientRect()
window.getComputedStyle(element)

🟨 What Causes Repaint (Cheaper but Not Free)

Repaint happens when appearance changes but geometry does not:

• Changing color
• Changing background-color
• Changing visibility
• Changing box-shadow
• Changing outline

div.style.backgroundColor = "red"; // repaint only, no layout

🟩 Best Case: Compositor-Only Changes

Using transform or opacity avoids both reflow and repaint. These changes happen on the GPU compositor thread—extremely fast!

box.style.transform = "translateX(30px)";  
box.style.opacity = "0.7";
// No layout, no paint — just compositing

🧨 Layout Thrashing: The Performance Killer

Layout thrashing happens when you repeatedly mix layout reads and writes in the same execution cycle. This causes hundreds of reflows!

// ❌ BAD: Layout thrashing
function badResize(items) {
  for (let i = 0; i < items.length; i++) {
    // Forces layout read
    const width = items[i].offsetWidth;
    // Triggers layout write
    items[i].style.width = width + 5 + "px";
    // Repeat hundreds of times = disaster
  }
}

// ✅ GOOD: Batch reads, then batch writes
function goodResize(items) {
  // Read all at once
  const widths = items.map(item => item.offsetWidth);
  
  // Write all at once
  items.forEach((item, i) => {
    item
...

🎯 Efficient vs Inefficient Animations

The difference between laggy and smooth animations often comes down to which properties you animate:

// ❌ BAD: Triggers reflow every frame
function animateBad(element) {
  setInterval(() => {
    element.style.left = element.offsetLeft + 2 + "px";
  }, 16);
}

// ✅ GOOD: Uses compositor (GPU)
function animateGood(element) {
  let x = 0;
  
  function animate() {
    x += 2;
    element.style.transform = `translateX(${x}px)`;
    requestAnimationFrame(animate);
  }
  
  animate();
}

// Even better: with will-change
const box = document.querySelector('.animate-box');
box.style.willChange = 'tran
...

🕹️ Real-World: Smooth Scroll Performance

Scroll events fire hundreds of times per second. Without optimization, they destroy performance:

// ❌ BAD: Triggers layout on every scroll
window.addEventListener('scroll', () => {
  const sidebar = document.querySelector('.sidebar');
  sidebar.style.top = window.scrollY + "px";
});

// ✅ GOOD: GPU-accelerated with throttle
function throttle(fn, limit) {
  let inThrottle = false;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

const sidebar = document.querySelector('.s
...

🔥 DocumentFragment: Batch DOM Changes

When adding multiple elements, use DocumentFragment to avoid multiple reflows:

// ❌ BAD: Multiple reflows
function addItemsSlow(container, count) {
  for (let i = 0; i < count; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    container.appendChild(div); // reflow each time
  }
}

// ✅ GOOD: Single reflow with fragment
function addItemsFast(container, count) {
  const fragment = document.createDocumentFragment();
  
  for (let i = 0; i < count; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`
...

🧬 Compositor Layers & GPU Acceleration

Modern browsers split the page into layers. Certain properties automatically create a new layer:

• CSS transform
• CSS opacity
• CSS will-change
• Canvas, video, iframes
• position: fixed in some scenarios

.box {
  will-change: transform;
}

// Now this runs on GPU:
box.style.transform = "translateY(120px)";

🧠 Chrome DevTools Performance Debugging

Professional engineers use these techniques to find performance bottlenecks:

🏁 Professional Performance Checklist

Follow this checklist to achieve near-professional performance:

🎓 Practice Challenges

slider.addEventListener("mousemove", () => {
  handle.style.left = event.clientX + "px";
});