Что такое layout thrashing?

Senior
146 просмотров
AFK Offer AI

Layout thrashing — многократное чтение и запись DOM свойств, вызывающее forced reflow на каждую итерацию. Пример: for (let i; i < elements.length; i++) { const height = elements[i].offsetHeight; elements[i].style.height = height + 10 + "px"; }. Каждое чтение offsetHeight после записи style.height вызывает пересчёт layout. Решение: сначала прочитай все значения, потом запиши все. Или используй requestAnimationFrame. FastDOM библиотека автоматически батчит read/write. DevTools Performance → фиолетовые блоки = layout.

Следующий вопрос

Что такое template.tsx и чем отличается от layout.tsx?