\n \n

Загружаются ли с высоким приоритетом не async скрипты

2.0 Middle🔥 161 комментариев

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

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

🐱

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

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

Загружаются ли с высоким приоритетом не async скрипты

Да, скрипты без атрибутов async и defer загружаются с высоким приоритетом (blocking/synchronous). Они блокируют парсинг HTML и выполняют код сразу при встреченном теге script. Это важный аспект оптимизации производительности.

Приоритеты загрузки скриптов

<!-- 1. ВЫСОЧАЙШИЙ ПРИОРИТЕТ: блокирует парсинг -->
<script src="critical.js"></script>

<!-- 2. ВЫСОКИЙ ПРИОРИТЕТ: async загрузка, но выполняет при готовности -->
<script async src="analytics.js"></script>

<!-- 3. НОРМАЛЬНЫЙ ПРИОРИТЕТ: загружается параллельно, выполняет после парса -->
<script defer src="app.js"></script>

Механизм блокирования обычных скриптов

<!DOCTYPE html>
<html>
<head>
  <title>Тест</title>
</head>
<body>
  <h1>Заголовок</h1>
  
  <!-- Браузер ОСТАНОВИТ парсинг HTML здесь -->
  <script src="blocking.js"></script>
  <!-- Будет ждать загрузки и выполнения blocking.js -->
  
  <h2>Этот текст НЕ будет виден до выполнения скрипта</h2>
  
  <!-- Нужно ждать -->
  <p>Содержимое после скрипта</p>
</body>
</html>

Процесс:

Браузер парсит HTML
Встречает <script src="...">
STOP парсинг HTML
Загружает скрипт
Выполняет скрипт
RESUMЕ парсинг HTML

Даже если скрипт маленький (1kb), браузер всё равно остановится.

Сравнение: async vs defer vs обычный

// blocking.js
console.log('Выполняю blocking');
for (let i = 0; i < 1000000000; i++) {} // Долгая операция
console.log('Готово blocking');

// analytics.js
console.log('Выполняю analytics');

// app.js
console.log('Выполняю app');

<h1>Страница загружается...</h1>

<!-- Обычный скрипт -->
<script src="blocking.js"></script>
<!-- Парсинг БЛОКИРОВАН, страница замёрзла -->

<h2>Контент 1</h2>

<!-- Async скрипт -->
<script async src="analytics.js"></script>
<!-- Загружается параллельно, выполняет СРАЗУ при готовности -->

<h3>Контент 2</h3>

<!-- Defer скрипт -->
<script defer src="app.js"></script>
<!-- Загружается параллельно, выполняет ПОСЛЕ парса -->

<p>Контент 3</p>

Вывод в консоль:

Выполняю blocking          // Сразу, парсинг заблокирован
Готово blocking
Выполняю analytics         // Может быть в любой момент
Контент 1 виден
Контент 2 виден
Контент 3 виден
Выполняю app               // После парса

Демонстрация проблемы

<style>
  h1 { color: red; }
</style>

<h1>Главный заголовок</h1>

<!-- Обычный скрипт, который долго грузится -->
<script src="https://slow-server.com/huge.js?delay=3000"></script>

<!-- Этот контент покажется только через 3+ секунды! -->
<h2>Вторичный контент</h2>
<p>Пользователь видит пустой экран...</p>

Лучшие практики: оптимизация

1. Критичные скрипты в head (с осторожностью):

<head>
  <!-- Только КРИТИЧНЫЕ скрипты, например, для auth check -->
  <script src="/check-auth.js"></script>
</head>

2. Асинхронные скрипты для независимого кода:

<body>
  <h1>Основной контент</h1>
  
  <!-- Analytics, не влияет на UX -->
  <script async src="/analytics.js"></script>
  
  <!-- Ads, не критичны -->
  <script async src="/ads.js"></script>
</body>

3. Defer скрипты для основного приложения:

<body>
  <div id="app">Основной контент загружается...</div>
  
  <!-- Основное приложение после парса -->
  <script defer src="/app.js"></script>
</body>
</html>

Реальная производительность

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Оптимизированная страница</title>
</head>
<body>
  <!-- Критичный контент -->
  <header>
    <nav>...</nav>
  </header>
  
  <main id="app">
    <!-- Основное содержимое -->
  </main>
  
  <footer>...</footer>
  
  <!-- Асинхронные скрипты (analytics, ads) -->
  <script async src="https://cdn.analytics.com/track.js"></script>
  <script async src="https://ads.example.com/ads.js"></script>
  
  <!-- Основное приложение defer -->
  <script defer src="/js/app.js"></script>
  
  <!-- Или динамическая загрузка -->
  <script>
    // Инлайн скрипт для основной функциональности
    document.addEventListener('DOMContentLoaded', () => {
      import('/js/app.js');
    });
  </script>
</body>
</html>

Измерение приоритета

// Проверить приоритет загрузки
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log({
      name: entry.name,
      initiatorType: entry.initiatorType, // 'script', 'link'
      priority: entry.nextHopProtocol,
      duration: entry.duration,
      transferSize: entry.transferSize
    });
  }
});

observer.observe({ entryTypes: ['resource'] });

Modern approach: Module scripts

<!-- Type module = defer по умолчанию, + module resolution -->
<script type="module" src="/app.js"></script>

<!-- Inline script выполнит после module загрузки -->
<script>
  console.log('Выполнится после app.js');
</script>

Критичные метрики

Web Vitals, зависящие от скриптов:

FCP (First Contentful Paint): зависит от blocking скриптов
LCP (Largest Contentful Paint): когда большой контент видимо
CLS (Cumulative Layout Shift): скрипты вызывают reflow

// Отслеживать скрипты, которые замораживают страницу
const scriptStart = performance.now();

// Долгий скрипт
for (let i = 0; i < 100000000; i++) {}

const scriptDuration = performance.now() - scriptStart;
console.log(`Скрипт заблокировал на ${scriptDuration}ms`);

// Если больше 50ms = плохо для UX
if (scriptDuration > 50) {
  console.warn('Скрипт слишком долгий!');
}

Ключевые выводы

Обычные скрипты имеют ВЫСОЧАЙШИЙ приоритет — блокируют парсинг
Async = загружается параллельно, выполняет сразу — для независимого кода
Defer = загружается параллельно, выполняет после — для основного app
Порядок важен: обычные -> async/defer -> динамические
Оптимизация: минимизируй блокирующие скрипты, используй defer/async

Правильное размещение скриптов — один из ключей к отличной производительности.