В каком порядке браузер строит DOM и CSSOM?

Question

DOM строится по мере парсинга HTML — потоково, сверху вниз. CSSOM строится после загрузки и парсинга CSS-файлов, которые браузер находит в HTML. Эти процессы могут идти параллельно: DOM продолжает строиться, пока качается CSS. Но для создания Render Tree и первой корректной отрисовки обычно нужен уже готовый CSSOM, поэтому стили считаются блокирующими рендер.

YeaHub · Accepted Answer

Важно разделять “строим” и “можем отрисовать”.1) DOM: потоково при чтении HTMLБраузер читает HTML и сразу добавляет узлы в DOM.порядок: от начала документа к концуесли встречается <script> без defer/async, парсинг DOM может остановиться до выполнения скрипта2) CSSOM: после загрузки CSSКогда браузер встречает CSS, он начинает загрузку и затем парсит его в CSSOM.Определение: CSSOM — структура, содержащая CSS-правила и позволяющая вычислить итоговые стили.CSS может грузиться параллельно с построением DOM, но CSSOM появится только после получения и парсинга CSS.3) Ключевая зависимость: Render Tree требует и DOM, и CSSOMДаже если DOM уже частично готов, браузеру для визуального дерева обычно нужен и CSSOM.Render Tree строится из:узлов DOM, которые отображаются,рассчитанных стилей на основе CSSOM4) Что это означает на практикеDOM может быть “почти готов”, но отрисовка задерживается из-за CSS.Неправильно подключённые стили (много, тяжёлые, в начале) могут сдвинуть FCP/LCP.Скрипт может зависеть от CSS (например, измерять размеры), и тогда браузеру придётся синхронно дождаться стилей.Мини-пример зависимости от стилей// запрос размеров может заставить браузер завершить расчёты стилей/лейаута
const h = document.querySelector('.card').offsetHeight;
Вывод: браузер строит DOM во время парсинга HTML, а CSSOM — после загрузки и парсинга CSS. Для корректной визуальной сборки (render tree → layout → paint) обычно нужны оба, поэтому CSS часто влияет на скорость первого рендера.