Browser & Web Performance · Middle · Question 1 of 75

What problem does this code cause?

for (const card of cards) {
  const h = card.offsetHeight;
  card.style.height = h + 10 + "px";
}

1Nothing, browsers batch all reads and writes automatically
✓Correct answer: Layout thrashing: each read after a write forces a synchronous layout inside the loop
3A memory leak, because offsetHeight caches every element

Explanation

Reading geometry after changing styles forces the browser to recalculate layout immediately. Batch all reads first, then all writes.

Further reading

Test yourself

Take the Browser & Web Performance · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.