Batch layout reads and writes

Read all geometry first, then write in requestAnimationFrame.

From nextjs-pagespeed.

Frame time max –

Size tiles from their width

Run each side and watch the frame meter.

Read, write, repeatBad

– ms– forcedmedian –

el.style.height = el.offsetWidth * r
Read all, then writeGood

– ms– forcedmedian –

w = tiles.map(read); rAF(() => tiles.forEach(write)) 
const widths = tiles.map((el) => el.offsetWidth);
requestAnimationFrame(() => {
  tiles.forEach((el, i) => {
    el.style.height = `${widths[i] * ratio}px`;
  });
});

Type into equal-height cards

Hold a key down in each box.

Measure each pairBad

– ms– forcedworst –

write → read → write, per pair
One pass per frameGood

– ms– forcedworst –

rAF: write all → read all → write all

Why it matters, pros and cons

Why it matters

A read after a write forces layout; alternating them forces it every time.

Pros

  • N forced layouts become one.
  • Writes land in the frame that paints.
  • Event bursts fold into one pass.

Cons

  • Deferred writes land one frame later.
  • Reads go stale if other code writes between.
  • CSS or ResizeObserver often avoids reading at all.