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 — each pass thrashes layout again.

readwritereadwrite
forced layouts: 0
Each read flushes layout again

Tap the example to replay it · press and hold to slow it down

One of 40 cards in javascript flashcards. Browse every card.