Back to the Catalog
css
frontend
performance

The CSS Rendering Pipeline: Reflow vs Repaint & Why transform Is Cheap

14 questions

Follow a pixel from CSS to screen: Style → Layout → Paint → Composite. See exactly what makes the browser re-run Layout (reflow) versus just Paint (repaint), why transform and opacity ride the compositor and skip both, and how reading offsetHeight at the wrong moment forces a synchronous layout. The rendering-side companion to the event-loop quiz — same main thread, the other half of its story. Every claim is grounded in the browser's documented rendering steps.