Как выполняется обработка HTML после парсинга

Что проверяют

Знаете ли вы путь от разметки до пикселей и понимаете ли, где в нём находятся ваши скрипты и стили.

Как отвечать

После разбора разметки браузер строит дерево документа, параллельно из стилей строит дерево правил, затем объединяет их в дерево отрисовки, считает геометрию, рисует слои и собирает кадр.

По шагам:

• разбор разметки в дерево документа. Он потоковый, поэтому страница может начать отображаться до полной загрузки;
• разбор стилей в объектную модель. Стили блокируют отрисовку: пока они не загружены, браузер не покажет содержимое, чтобы не мигать неоформленным текстом;
• скрипты: обычный <script> в середине разметки останавливает разбор. Поэтому ставят defer (выполнится после разбора, порядок сохранится) или async (выполнится когда загрузится, порядок не гарантирован);
• дерево отрисовки: узлы без отображения (display: none, служебные) в него не попадают;
• раскладка: считаются размеры и положение. Это самый дорогой шаг, и он запускается заново при изменении геометрии;
• отрисовка и композиция: заливка пикселей и сборка слоёв, часть работы уходит на видеокарту.

Практические следствия, ради которых вопрос и задают: изменение геометрии вызывает пересчёт раскладки, изменение цвета только перерисовку, а transform и opacity меняются на этапе композиции и потому дешевле всего для анимаций. Чтение свойств вроде offsetHeight сразу после записи в стили вызывает принудительный пересчёт, и в цикле это даёт заметное торможение.

Где спотыкаются

Не знают про блокировку разбора синхронным скриптом и ставят его в начало документа.

Анимируют top и left вместо transform.

Читают и пишут стили вперемешку в цикле, вызывая пересчёт на каждой итерации.