Explain the browser CSS rendering pipeline: Layout, Paint, and Composite stages.
❓ Interview Prompt: Describe how browsers render CSS through style calculation, layout, paint, and composite steps, and how to avoid forced reflows.
The browser renders CSS in a multi-stage pipeline:
1. Style Calculation:
Browser matches CSS selectors to DOM nodes and computes final property values.
2. Layout (Reflow):
Calculates geometry (position, size) of every element. Expensive — triggered by changes to width, height, margin, padding, font-size, or reading layout properties (offsetHeight, getBoundingClientRect).
3. Paint:
Fills pixels for each element (colors, borders, shadows, text). Split into paint records.
4. Composite:
Assembles painted layers on the GPU. transform and opacity changes only trigger compositing (cheapest stage).
Performance Rule:
Animating transform and opacity skips layout and paint, running entirely on the GPU compositor thread at 60fps.
Code Implementation Example
/* ❌ Triggers layout + paint (expensive) */
.card:hover { width: 320px; top: -4px; }
/* ✅ Triggers composite only (cheap, 60fps) */
.card:hover {
transform: translateY(-4px) scale(1.02);
opacity: 0.95;
}Only animate transform and opacity for 60fps. All other property changes trigger expensive layout or paint stages.