Reflow.
A reflow is the browser recomputing the positions and sizes of elements on a page after a change.
When an element’s width, height, position or typeface changes, the browser has to recompute the layout — and the computation is usually not limited to that element but covers its neighbours and sometimes the whole document.
The cost shows in two places. Reflows during page load produce layout shift and spoil CLS; those during use occupy the main thread and spoil INP.
The most frequent triggers are well known, and most are avoidable.
- An image without dimensions arriving — no space was reserved, so everything is pushed.
- Font swapping — the text takes up a different amount of room.
- Content added later — if it enters the existing flow, it pushes.
- Animating with layout properties — a reflow on every frame.
- Reading a layout value and immediately writing one — this forces the browser to compute at once.
The last item is the classic trap on the JavaScript side: reading one element’s size and immediately changing another’s forces the browser to recompute on every iteration. Grouping the reads and the writes removes that cost.
On the animation side the rule is a single sentence: use only transform and opacity. Neither affects layout; the element moves in its own layer and its neighbours stay put.
Browsers try to batch reflow work: several changes are accumulated and computed at once. But when a layout value is READ, that batching breaks — to give the correct answer the browser has to perform the pending computations immediately.
That is why the golden rule on the JavaScript side is to group reads and writes: all the reads first, then all the writes. A loop that mixes the order forces a recomputation at every step, and the cost is multiplied by the number of elements.
On the animation side the rule is simpler: use only transform and opacity. Neither affects layout, both are usually handled in the graphics card’s layer, and neither occupies the main thread.
Reflow and repaint are also confused, and their costs differ. An element whose colour alone changes is repainted but triggers no layout computation; an element whose position or size changes produces first a reflow and then a repaint. The second is markedly expensive, and its cost multiplies with how much of the page it affects.