HTML → DOM, CSS → CSSOM, вместе → дерево отрисовки → layout (геометрия: размеры и позиции) → paint (пиксели слоёв) → composite (сборка слоёв на GPU). Reflow — пересчёт раскладки при изменении геометрии, дорогой; repaint — перерисовка без изменения геометрии (цвет), дешевле.
А ещё Чередование чтений и записей в цикле — layout thrashing
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Этапы:
sotto<script>, парсер останавливается, пока скрипт не загрузится и не выполнится.Что вызывает reflow: изменение размеров, шрифтов, содержимого, добавление элементов, чтение геометрии (offsetWidth, getBoundingClientRect) после изменений.
Layout thrashing:
for (const el of items) {
el.style.width = box.offsetWidth + "px"; // чтение после записи — reflow на каждой итерации
}
// сначала все чтения, потом все записи
const w = box.offsetWidth;
for (const el of items) el.style.width = w + "px";Анимации: transform и opacity обрабатываются компоновщиком — плавно даже при занятом основном потоке. will-change подсказывает вынести элемент в свой слой (не злоупотреблять: слои стоят памяти).
sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.