Comparison
Forced synchronous layoutvsLayout thrashing
Forced synchronous layout
the profiler flags a purple block with a warning triangle where you asked for an element's width.
Reading a geometric property while style or layout changes are still pending, which forces the browser to run layout immediately rather than at its scheduled point. A single one is cheap; it is only expensive when it happens repeatedly. The list of triggering properties is long and unintuitive — `offsetTop`, `getBoundingClientRect`, `scrollTop`, `getComputedStyle` — which is why the profiler's warning is more reliable than memory.
Full entry →Layout thrashing
you read `offsetHeight` and wrote a style inside the same loop, and the loop got slower with every item.
Repeatedly forcing layout by interleaving DOM reads and writes, so the browser must recompute geometry on every iteration instead of once. It turns a linear loop into a quadratic one and is invisible on ten elements and catastrophic on a thousand. The fix is always the same shape: batch all reads, then all writes, or move the measurement to a ResizeObserver that already has the answer.
Full entry →