Skip to content
COSMODEV

How the Browser Renders a Page Explained

Every frame you see is the end of a pipeline: parse, style, layout, paint, composite. Every performance rule is about doing less of it — and the tier your change touches (reflow, repaint, or composite-only) decides what it costs.

Animated diagrams · 2 flows

Compare all 2

Sort by any column to find the right fit. Click a name to open its details.

Bytes to PixelsHTML/CSS bytes → composited pixelsRuns per rendered frameMilliseconds per stage, layout worstRender engine internalsFixed pipeline — you only choose how much of it runsUnderstanding why some changes are cheap and some jank
The Cost LadderProperty changed → stages re-runPer style change, per frameComposite < repaint < reflowStyle invalidationA ladder every CSS author should knowChoosing animatable properties deliberately