perfhard
What causes a reflow, and why does it matter for performance?
Answer
A reflow is the browser recomputing geometry — positions and sizes — and it cascades to affected elements. Changing layout properties triggers it, and reading a measured value like offsetHeight forces it to happen immediately. The expensive pattern is alternating writes and reads in a loop, which is layout thrashing. Batch your reads, then your writes, and prefer transform and opacity, which can be composited without reflow.
Points an interviewer listens for
- Reflow = recompute layout geometry; repaint = redraw pixels
- Reading offsetHeight/getBoundingClientRect forces sync layout
- Read-then-write batching avoids thrashing
- transform/opacity animate without reflow
Reported at
Similar questions have been reported by candidates at Northcorp Software, Cognizant, Pocket FM, Tekion, Tekwissen, Accenture.
Now try answering it out loud
Interview practice mode times your spoken answer and checks it against the points above.
Practise this question