Вопрос проверяет понимание этапов парсинга и отрисовки страницы в браузере и того, где возникают задержки.
После получения HTML браузер начинает его разбирать и строить DOM. По ходу парсинга он находит ресурсы (CSS, JS, изображения, шрифты) и запускает их загрузку. Когда CSS загружен и распарсен, строится CSSOM, затем из DOM + CSSOM собирается дерево рендеринга. Дальше браузер рассчитывает размеры и позиции элементов (layout) и рисует их (paint), а затем может “склеивать” слои (composite). Скрипты и стили могут блокировать некоторые шаги, из-за чего первая отрисовка откладывается.
После того как браузер получил HTML, он проходит несколько стадий, и часть из них идёт параллельно.
Браузер читает HTML потоково и строит дерево узлов.
Что делает: токенизация → парсинг → создание DOM.
Побочный эффект: по мере чтения HTML браузер “находит” внешние ресурсы:
<link rel="stylesheet" href="...">
<script src="...">
<img src="...">
шрифты из @font-face и т.д.
Пока DOM строится, браузер старается заранее качать то, что понадобится для рендера.
Preload scanner: браузер может заранее просканировать HTML и начать загрузки ещё до полного построения DOM.
Приоритет: CSS и критические ресурсы обычно получают более высокий приоритет, чем, например, “декоративные” картинки.
Когда CSS загружен, браузер парсит его в структуру правил.
Определение: CSSOM — объектная модель CSS, представление стилей в виде дерева/структур, удобной для вычисления итоговых стилей.
Пока CSSOM не готов, браузер обычно не делает полноценную первую отрисовку (чтобы не показать страницу без стилей).
Далее браузер объединяет информацию из DOM и CSSOM.
Определение: Render Tree — дерево элементов, которые реально участвуют в визуальном отображении (например, display: none туда не попадает).
На этом шаге вычисляются “итоговые” стили (computed styles) для отображаемых узлов.
Браузер определяет, где и какого размера будут элементы.
вычисление размеров, координат, переносов строк
учёт шрифтов, размеров контейнеров, flex/grid и т.п.
Браузер рисует пиксели и при необходимости склеивает слои.
Paint: отрисовка текста, фонов, границ, теней и т.д.
Composite: сборка слоёв (например, при transform, opacity) в финальную картинку на экране.
Если поставить тяжёлый <script> в <head> без defer/async, он может остановить парсинг HTML и задержать появление контента:
<head>
<script src="/heavy.js"></script>
</head>
Вывод: после получения HTML браузер строит DOM, загружает и парсит CSS в CSSOM, собирает Render Tree, делает layout, затем paint/composite. Понимание этих стадий помогает объяснять “почему страница медленно показывает контент”.