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