Ответ
Да, CSS может блокировать парсинг HTML, но только в определённых случаях.
-
Синхронные CSS (
<link rel="stylesheet">в<head>безmediaилиonload): браузер приостанавливает рендеринг, пока не загрузится и не обработается CSS. Это связано с тем, что CSS может влиять на layout. -
CSS в
<body>: если стили вставлены до контента, браузер может приостановить парсинг HTML для их обработки.
Пример блокирующего CSS:
<head>
<link rel="stylesheet" href="styles.css"> <!-- Блокирует рендеринг -->
</head>Оптимизация:
- Используйте
media-атрибуты для нефункциональных стилей (media="print"). - Добавляйте
rel="preload"для критического CSS. - Размещайте неважные стили в конце
<body>или загружайте асинхронно.
Ответ 18+ 🔞
А, ну ты про это, про CSS, который может HTML-парсинг тормозить. Да, бывает такое, ёпта, как же без этого.
Смотри, в общем, если ты в <head> воткнёшь обычную ссылку на стили, типа <link rel="stylesheet" href="styles.css">, то браузер такой: "Стоп, мужик, погоди-ка". И будет он жрать этот CSS, пока весь не проглотит и не переварит, прежде чем дальше страницу рендерить начнёт. А всё почему? Потому что стили — это, блядь, святое! Они на layout влияют, на отступы, на размеры. Представь, он уже что-то нарисовал, а тут бац — приехали стили и всё поехало. Пиздец бардак. Вот он и ждёт, хитрая жопа.
Или вот ещё прикол: если ты эти стили прямо в середину <body> засуньешь, перед каким-нибудь блоком. Браузер опять в ступор впадёт: "Чё за хуйня? Надо сначала понять, как это выглядеть должно, а потом уже дальше читать".
Вот, смотри, как делать НЕ НАДО, если хочешь, чтобы всё быстро грузилось:
<head>
<link rel="stylesheet" href="styles.css"> <!-- Вот эта хуйня всё и тормознёт -->
</head>А как быть-то, спросишь? А вот как, ебать мои старые костыли:
- Атрибут
media— наш друг. У тебя есть стили для принтера?media="print"и вперёд. Браузер посмотрит: "А, это на экран не влияет, похуй", и будет парсить дальше, не заморачиваясь. rel="preload"для самого главного. Скажи браузеру: "Слушай, вот этот CSS — овердохуища важный, качай его заранее, как только увидел, но не блокируй меня, я пока другим займусь".- Неважное — в конец. Всё, что не нужно для первой отрисовки (шрифты какие-нибудь навороченные, стили для попапов), просто выкидывай в самый низ
<body>или грузи асинхронно, когда основное уже отрисовалось.
Короче, вся фишка в том, чтобы не заставлять браузер ждать того, что ему прямо щас не нужно. А то получится как с Герасимом и Муму — пока он там со стилями разбирается, пользователь уже ушёл, накрывшись медным тазом.