hard20 pts · first answer countsweb-performancerendering

Avoiding layout thrashing

This loop is slow on large lists. Why, and what is the best fix?

items.forEach(el => {
  const h = el.offsetHeight
  el.style.height = h * 2 + 'px'
})

A.forEach is slow; use a for loopB.offsetHeight is cached so the bug is elsewhereC.Use innerHTML instead of styleD.Each read after a write forces a synchronous layout; read all heights first, then write all styles

Discussion 0

Join free to post in the discussion.

Avoiding layout thrashing

Discussion 0

Related questions