В каком порядке будут грузиться стили и скрипты на странице

1.0 Junior🔥 131 комментариев

#Браузер и сетевые технологии

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

В каком порядке будут грузиться стили и скрипты на странице

Порядок загрузки ресурсов в браузере — фундаментальное понимание для оптимизации производительности. Это влияет на время до первого отображения контента и интерактивности.

Базовый порядок загрузки

<!DOCTYPE html>
<html>
<head>
  <!-- 1. Стили грузятся параллельно -->
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="bootstrap.css">
  
  <!-- 2. Скрипты в head блокируют парсинг -->
  <script src="analytics.js"></script>
</head>
<body>
  <h1>Контент страницы</h1>
  
  <!-- 3. Скрипты в конце body выполняются после парсинга HTML -->
  <script src="app.js"></script>
</body>
</html>

Подробный порядок выполнения

Фаза 1: Парсинг HTML и загрузка ресурсов

Браузер начинает парсить HTML сверху вниз
Стили (<link>) загружаются параллельно и не блокируют парсинг
Скрипты (<script>) в <head> блокируют парсинг — браузер ждет загрузки и выполнения

<head>
  <link rel="stylesheet" href="style.css"> <!-- Загружается параллельно -->
  <link rel="stylesheet" href="theme.css"> <!-- Загружается параллельно -->
  
  <script src="jquery.js"></script> <!-- БЛОКИРУЕТ ПАРСИНГ -->
  <!-- Браузер ждет, пока jquery загрузится и выполнится -->
  
  <script src="app.js"></script> <!-- Выполнится только после jquery -->
</head>
<body>
  <!-- Парсинг продолжится только после всех скриптов в head -->
  <h1>Заголовок</h1>
</body>

Влияние стилей на отрисовку

Стили блокируют отрисовку (Paint), но не парсинг:

<head>
  <!-- Браузер парсит HTML, но НЕ рисует до загрузки стилей -->
  <link rel="stylesheet" href="critical.css">
</head>
<body>
  <h1>Этот текст не будет видим, пока не загрузятся стили</h1>
</body>

Это называется FOUC (Flash of Unstyled Content) — если стили загружаются долго, пользователь видит неформатированную страницу.

Оптимизация: атрибуты скриптов

async — загружается параллельно, выполняется сразу после загрузки (блокирует парсинг):

<head>
  <!-- Загружается параллельно, но блокирует при выполнении -->
  <script src="analytics.js" async></script>
  
  <!-- Выполнится сразу после загрузки, когда браузер найдет его -->
  <script src="tracking.js" async></script>
</head>
<body>
  <h1>Контент может быть показан раньше (зависит от скорости загрузки)</h1>
</body>

defer — загружается параллельно, выполняется после парсинга в порядке появления:

<head>
  <!-- Загружается параллельно, выполняется в порядке -->
  <script src="jquery.js" defer></script>
  <script src="app.js" defer></script>
  <!-- app.js выполнится ТОЛЬКО после jquery благодаря defer -->
</head>
<body>
  <h1>Контент парсится немедленно</h1>
</body>

Сравнение: Normal vs async vs defer

NORMAL (no attributes):
Parse HTML -> STOP -> Load script -> Execute -> Continue Parse -> Render
             (блокирует)

ASYNC:
Parse HTML ---------> STOP (при загрузке) -> Execute -> Continue Parse -> Render
         Load async (параллельно)

DEFER:
Parse HTML ---------> Continue Parse -> Render -> Load -> Execute
         Load defer (параллельно)

Практический пример оптимальной структуры

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  
  <!-- Критичные стили в head (необходимы для первого отображения) -->
  <link rel="stylesheet" href="critical.css">
  
  <!-- Некритичные стили могут загружаться асинхронно -->
  <link rel="stylesheet" href="main.css" media="print" onload="this.media=all">
  
  <!-- Google Analytics с async -->
  <script async src="https://www.googletagmanager.com/gtag/js"></script>
</head>
<body>
  <h1>Основной контент</h1>
  
  <!-- Тяжелые скрипты в конце body с defer -->
  <script src="vendor.js" defer></script>
  <script src="app.js" defer></script>
  
  <!-- Инлайн скрипты минимизируют -->
  <script>
    // Только критичный код
    console.log("Page loaded");
  </script>
</body>
</html>

Resource Hints для оптимизации

<head>
  <!-- Preload: загрузить рано, но отложить выполнение -->
  <link rel="preload" href="font.woff2" as="font">
  
  <!-- Prefetch: загрузить в фоне, если есть время -->
  <link rel="prefetch" href="next-page.html">
  
  <!-- DNS prefetch: разрешить DNS заранее -->
  <link rel="dns-prefetch" href="https://cdn.example.com">
  
  <!-- Preconnect: установить соединение заранее -->
  <link rel="preconnect" href="https://cdn.example.com">
</head>

Типичный порядок в Next.js приложении

<head>
  <!-- 1. Fonts первыми (критичные) -->
  <link rel="preload" href="/fonts/inter.woff2" as="font">
  
  <!-- 2. Inline критичный CSS -->
  <style>/* critical CSS */</style>
  
  <!-- 3. Остальные стили -->
  <link rel="stylesheet" href="/_next/static/css/main.css">
  
  <!-- 4. Некритичные ресурсы -->
  <link rel="prefetch" href="/_next/static/chunks/main.js">
</head>
<body>
  <div id="__next"></div>
  
  <!-- 5. Основной бандл в конце -->
  <script src="/_next/static/chunks/main.js" defer></script>
</body>

Метрики производительности

First Contentful Paint (FCP) — когда появляется первый контент Largest Contentful Paint (LCP) — когда загружается основной контент Time to Interactive (TTI) — когда страница становится интерактивной

Все эти метрики зависят от правильного порядка загрузки!

Лучшие практики

Помещай стили в <head> — они должны загружаться рано
Помещай скрипты в конец <body> или используй defer
Используй async только для независимых скриптов (аналитика, реклама)
Критичные скрипты используй defer для сохранения порядка
Используй preload/prefetch для предварительной загрузки ресурсов
Минимизируй блокирующие ресурсы — это ключ к быстрой странице

Правильный порядок загрузки может улучшить Core Web Vitals и пользовательский опыт.