Влияют ли стили на парсинг страницы?

Question

CSS напрямую не блокирует парсинг HTML, но может блокировать рендеринг страницы. Браузер старается получить стили до первой отрисовки, чтобы избежать визуальных скачков. Также CSS может косвенно блокировать выполнение JavaScript, если скрипт зависит от стилей. Поэтому порядок подключения ресурсов имеет значение.

YeaHub · Accepted Answer

CSS влияет не столько на парсинг HTML, сколько на этап отрисовки и выполнение скриптов.1) Парсинг HTML и CSSВажно разделять два процесса:Парсинг HTML:браузер читает документ и строит DOMЗагрузка CSS:браузер параллельно загружает стилистроит CSSOMHTML продолжает парситься, но браузер откладывает некоторые этапы.2) Почему CSS блокирует рендерингОпределение: Render blocking resource — ресурс, без которого браузер не может безопасно выполнить первую отрисовку.Причины:Без CSS невозможно корректно вычислить layout.Без layout нельзя построить render tree.Поэтому браузер ждёт CSS перед первой отрисовкой.3) Влияние на JavaScriptЕсли встречается 4) Практические выводыКритический CSS стоит держать небольшим.Большие стили лучше грузить отдельно.Важно следить за порядком подключения.Вывод: CSS не блокирует сам парсинг HTML, но блокирует рендеринг и может задерживать выполнение JavaScript.