Layout thrash: forced synchronous layout

A resize handler loops over 5000 rows. Each row reads its width then writes a new width. The page blocks for 5 seconds. The CPU is doing nothing exotic — it is running the same layout calculation 5000 times, once per row, because no one told it to batch.

How forced synchronous layout works

Layout is dirty-flag-driven: the browser batches style writes and only flushes them when it needs the latest geometry. The pathological case is a read-then-write loop in JS:

for (const row of rows) {
  const w = row.offsetWidth;        // read → forces flush of pending writes
  row.style.width = w + 10 + 'px'; // write → marks layout dirty again
}

Each iteration forces the browser to compute layout to answer offsetWidth, then immediately dirties layout for the next iteration. N rows = N full layouts.

A 5000-row list at 1 ms per layout = 5 seconds of main-thread blocking. DevTools shows this as a violet “Layout” bar followed by a “Forced reflow while executing JavaScript took XX ms” console warning.

The two-pass batch fix

Separate all reads from all writes:

// Two-pass batch: read first, write second.
const widths = [];
for (const row of rows) {
  widths.push(row.offsetWidth);          // pass 1: all reads
}
for (let i = 0; i < rows.length; i++) {
  rows[i].style.width = (widths[i] + 10) + 'px'; // pass 2: all writes
}

Because no read follows a write inside the same loop, the browser batches all the writes and runs one layout pass for the whole batch. Time complexity drops from O(N × layout) to O(layout).

The general rule: in any function that touches geometry, all reads come first, then all writes.

If you cannot decouple the reads from the writes, cache the width at component mount and recompute only when the parent actually changes size.

Properties that trigger forced layout

Any property that reports computed geometry forces a layout flush when read. The comprehensive list includes:

offsetWidth, offsetHeight, offsetTop, offsetLeft, offsetParent, clientWidth, clientHeight, clientTop, clientLeft, scrollWidth, scrollHeight, scrollTop, scrollLeft, getBoundingClientRect(), getComputedStyle(), scrollIntoView(), focus() (sometimes).

[Violation] Forced reflow while executing JavaScript took 42 ms
  at applyRowWidths (list.js:88)
  at handleResize (list.js:34)
  at window.onresize (list.js:12)

[Violation] Forced reflow while executing JavaScript took 47 ms
  at applyRowWidths (list.js:88)
  at handleResize (list.js:34)
  at window.onresize (list.js:12)

[Violation] Forced reflow while executing JavaScript took 51 ms
  at applyRowWidths (list.js:88)
  ...