Блокирует ли CSS парсинг HTML

Ответ

Да, CSS может блокировать парсинг HTML, но только в определённых случаях.


  1. Синхронные CSS (<link rel="stylesheet"> в <head> без media или onload): браузер приостанавливает рендеринг, пока не загрузится и не обработается CSS. Это связано с тем, что CSS может влиять на layout.



  2. CSS в <body>: если стили вставлены до контента, браузер может приостановить парсинг HTML для их обработки.


Пример блокирующего CSS:

<head>
  <link rel="stylesheet" href="styles.css"> <!-- Блокирует рендеринг -->
</head>

Оптимизация:

  • Используйте media-атрибуты для нефункциональных стилей (media="print").
  • Добавляйте rel="preload" для критического CSS.
  • Размещайте неважные стили в конце <body> или загружайте асинхронно.