PassFront
  1. PassFront
  2. База знаний
  3. Основы CSS

Как браузер определяет необходимость запроса CSS и JavaScript при загрузке страницы?

Основы CSS

Браузер находит, какие файлы нужны, разбирая HTML: по тегам <link> и <script> он узнаёт о ресурсах и решает, когда и с каким приоритетом их загружать.

Как это происходит

  1. Парсер HTML идёт сверху вниз и встречает <link rel="stylesheet"> — запрос CSS с высоким приоритетом, отрисовка будет ждать его.
  2. Встречает <script src> без атрибутов — парсинг HTML останавливается, пока скрипт не загрузится и не выполнится.
  3. Preload scanner заглядывает вперёд по HTML и заранее запускает загрузку найденных ресурсов, пока основной парсер стоит.

Как управлять загрузкой

<link rel="preload" href="font.woff2" as="font" crossorigin />
<script src="app.js" defer></script>   <!-- выполнится после разбора HTML -->
<script src="ads.js" async></script>   <!-- выполнится, как только загрузится -->
<link rel="stylesheet" href="print.css" media="print" />
  • defer и async не блокируют парсинг.
  • preload подсказывает о ресурсе, который иначе нашёлся бы поздно (шрифт из CSS).
  • Кеш (Cache-Control, ETag) решает, нужно ли вообще идти в сеть.

Коротко для собеседования

Браузер узнаёт о CSS и JS при разборе HTML (плюс preload scanner); CSS блокирует отрисовку, обычные скрипты — парсинг, а defer, async и preload управляют этим.

Подробнее: web.dev — Critical rendering path

Другие вопросы раздела