Верстка · Senior · Запитання 6 з 75
Що таке layout thrashing (forced synchronous layout)?
for (const el of items) {
el.style.width = box.offsetWidth + "px";
}- ✓Правильна відповідь: Багаторазовий перерахунок layout через чергування читання й запису в циклі
- 2Ситуація, коли CSS-анімація
widthперераховує layout кожен кадр - 3Помилка браузера за надто глибокої вкладеності DOM-дерева на сторінці
Пояснення
Читання offsetWidth після запису стилю змушує браузер синхронно перерахувати layout, щоб повернути актуальне значення. У циклі це відбувається на кожній ітерації. Рішення - спершу прочитати всі значення, потім записати (batch reads/writes), або винести читання з циклу. Допомагають і бібліотеки на кшталт fastdom.