layout thrashing
Alternating DOM reads and writes forces the browser to recalculate layout repeatedly.
Use this when An interaction stalls while repeatedly measuring and resizing elements.
without the term
“Resizing these cards in a loop makes the page freeze for a moment. The performance tab shows a lot of purple 'layout' blocks. Can you make it smooth?”
with the term · How do you ask a model for layout thrashing?
Reduce forced layout in this interaction. Use a performance trace to compare before and after, and verify measurements after fonts and content load.
What is layout thrashing?
Reading geometry such as offsetHeight after changing styles forces the browser to compute layout immediately. Doing it in a loop repeats that work every iteration. Painting is a separate, later step.
Why does layout thrashing matter when vibe coding?
An apparently small DOM loop can trigger repeated layout calculations.
How do you do layout thrashing?
Measure the interaction, group compatible reads and writes, and recheck after content changes.
What goes wrong with layout thrashing?
Caching geometry that becomes stale when the layout changes.