Browser Rendering Pipeline Visualizer

The Rendering Pipeline

Every frame the browser displays goes through up to 5 stages:

• JavaScript: Code that changes the DOM or CSSOM runs first
• Style: Matched rules are recalculated (always happens if anything changed)
• Layout (Reflow): Geometry changes. Width, height, position, margin, padding. Most expensive step.
• Paint (Repaint): Visual changes. Color, background, shadow, border-style. Fills in pixels.
• Composite: Layer composition. Transform, opacity. GPU-accelerated. Cheapest step.

Performance Tips

• Prefer transform and opacity for animations — they skip Layout and Paint entirely
• Avoid animating width, height, top, left — they trigger Layout on every frame
• Use will-change to promote elements to their own compositor layer (use sparingly)
• contain: layout paint limits the scope of Layout and Paint to the element's subtree
• Reading layout properties (offsetWidth, getBoundingClientRect()) after writing forces synchronous layout

Forced Synchronous Layout

The browser batches style/layout changes. But if you read a layout property after writing, the browser must calculate layout immediately:

• elem.style.width = '100px'; const w = elem.offsetWidth; — forces layout between these two lines
• This is called "layout thrashing" and is a common performance bottleneck
• Solution: batch all reads first, then batch all writes