Styling & Layout

Layout thrashing

Interleaving DOM reads that force layout with writes, in a loop, so the browser recomputes layout over and over. Batch all reads, then all writes, to avoid it.

Read offsetTop, set height, repeat in a loop: 100 items cost 100 forced layouts instead of one.

interleavedlayouts: 0
WRWRWR
batchedlayouts: 0
RRRWWW
Compare interleaved and batched R/W

One of 40 cards in the JavaScript deck. Browse every card.