Что такое forced layout?

Что такое forced layout?

Forced layout (принудительный макет) — это механизм в браузере, при котором происходит синхронный пересчет стилей и геометрии элемента (reflow) до того, как браузер завершит текущий кадр рендеринга. Обычно браузер оптимизирует перерисовку, откладывая вычисления до конца кадра, но некоторые операции заставляют его выполнить их немедленно.

Как это работает?

Когда вы изменяете CSS-свойства, влияющие на макет (например, width, height, margin), браузер помечает элемент как "грязный" и планирует пересчет. Если сразу после этого вы читаете свойство, зависящее от макета (например, offsetHeight, clientWidth, getBoundingClientRect()), браузер вынужден выполнить reflow прямо сейчас, чтобы вернуть актуальное значение. Это и есть forced layout.

Пример кода

// Плохо: вызывает forced layout
const box = document.getElementById('box');
for (let i = 0; i < 100; i++) {
  box.style.width = i + 'px'; // запись
  console.log(box.offsetWidth); // чтение - forced layout
}

// Хорошо: группируем чтение и запись
const box = document.getElementById('box');
const widths = [];
for (let i = 0; i < 100; i++) {
  box.style.width = i + 'px'; // запись
}
for (let i = 0; i < 100; i++) {
  widths.push(box.offsetWidth); // чтение после всех записей
}

Где применяется?

Forced layout часто встречается в анимациях, drag-and-drop, скроллерах и других интерактивных интерфейсах, где требуется точное позиционирование. Понимание этого механизма помогает избежать layout thrashing — множественных принудительных пересчетов, которые сильно снижают FPS.

Вывод

Избегайте forced layout, разделяя операции чтения и записи свойств макета. Используйте requestAnimationFrame для группировки изменений или библиотеки, которые оптимизируют работу с DOM. Это особенно важно для анимаций и высоконагруженных интерфейсов.