Reflow
ELI5 — The Vibe Check
A reflow is when the browser recalculates the size and position of everything on the page because you changed one element's layout. It's like moving one piece of furniture and having to rearrange the entire room. Browsers hate it. Your performance hates it more.
Real Talk
Reflow (or layout thrashing) recalculates element geometry — dimensions, positions, and their effect on surrounding elements. Triggered by DOM changes, style modifications affecting layout, or reading layout properties. It's the most expensive rendering operation and cascades through the DOM tree.
When You'll Hear This
"Reading offsetHeight inside a loop causes forced reflows on every iteration" / "Batch DOM writes together to avoid layout thrashing from repeated reflows"
Related Terms
Compositing
Compositing is the final step where the browser assembles all the painted layers into the image you see on screen, like stacking transparent sheets in a pr...
Long Tasks API
The Long Tasks API is a snitch that tells you whenever JavaScript hogs the main thread for more than 50 milliseconds.
Repaint
A repaint is when the browser redraws pixels because you changed something visual like a color or shadow.