Rendering Performance

Smooth 60fps

Users expect smooth, responsive interfaces. Understanding the rendering pipeline helps you avoid jank.

The Rendering Pipeline

1. JavaScript: Execute handlers, update DOM
2. Style: Calculate computed styles
3. Layout: Calculate geometry (expensive!)
4. Paint: Fill in pixels
5. Composite: Combine layers

Avoid Layout Thrashing

// Bad - forces layout on each iteration
elements.forEach(el => {
  el.style.width = el.offsetWidth + 10 + 'px';
});

// Good - batch read then write
const widths = elements.map(el => el.offsetWidth);
elements.forEach((el, i) => {
  el.style.width = widths[i] + 10 + 'px';
});

Use CSS for Animations

/* GPU-accelerated properties */
transform: translateX(100px);
opacity: 0.5;

/* Avoid animating */
width, height, top, left, margin, padding

Performance APIs

• requestAnimationFrame for visual updates
• requestIdleCallback for non-urgent work
• IntersectionObserver for visibility detection