Force layout - это процесс, при котором браузер вынужден принудительно пересчитать стили и расположение элементов на странице до завершения текущего цикла рендеринга. Это происходит, когда JavaScript обращается к свойствам элемента, зависящим от его текущего отображения (например, offsetWidth, offsetHeight, getComputedStyle()) сразу после изменения стиля или структуры DOM, которое может повлиять на эти свойства.
Недостатки force layout заключаются в значительном снижении производительности. Каждый force layout требует от браузера выполнения дорогостоящих операций по расчету стилей, дерева рендеринга и расположения элементов. Если это происходит многократно, например, в цикле или при обработке событий, это может вызвать "тормоза" и плохой пользовательский опыт.
Сравнение с обычным рендерингом:
| Обычный рендеринг | Force layout |
|---|---|
| Изменения DOM/стилей кешируются | Расчеты выполняются немедленно и принудительно |
| Перерисовка происходит в конце цикла | Перерисовка может происходить в любой момент |
| Оптимизирован браузером | Снижает производительность |
Пример кода, вызывающего force layout:
javascriptИзбежать force layout можно, группируя изменения стиля, используя requestAnimationFrame для чтения свойств или избегая чтения свойств макета сразу после их изменения.