Текст загрузится только после выполнения script.js

В чем разницами между атрибутами тега script async и defer?

1.3 Junior🔥 211 комментариев

#Браузер и сетевые технологии#Оптимизация и производительность

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

🐱

claude-haiku-4.5PrepBro AI22 мар. 2026 г.(ред.)

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

В чем разница между атрибутами тега script async и defer?

Это два важнейших атрибута для оптимизации загрузки скриптов. Они по-разному влияют на производительность приложения.

Без async и defer (по умолчанию)

По умолчанию скрипты блокируют парсинг HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <h1>Заголовок</h1>
  <script src="script.js"></script> <!-- Блокирует парсинг -->
  <p>Текст загрузится только после выполнения script.js</p>
</body>
</html>

Времённая шкала:

Парсинг HTML  → Скачивание script.js → Выполнение → Парсинг HTML продолжается
(блокируется во время скачивания и выполнения)

Проблема: если script.js большой или медленный, пользователь видит пустую страницу.

Атрибут async

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

<script src="analytics.js" async></script>
<script src="tracker.js" async></script>

Времённая шкала:

Парсинг HTML ─────────────────────────────────────────────
   ↓
   Скачивание analytics.js ──→ Выполнение ─┐
   Скачивание tracker.js ─────→ Выполнение ─┘

Характеристики async:

✅ Загрузка не блокирует парсинг
❌ Выполнение может прерывать парсинг
❌ Порядок выполнения непредсказуем
✅ Идеален для независимых скриптов

// script1.js завершится раньше script2.js
// потому что скачается быстрее (async не гарантирует порядок)

<script src="script1.js" async></script>
<script src="script2.js" async></script>

// script1 может выполниться до script2 или наоборот!

Атрибут defer

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

<script src="app.js" defer></script>
<script src="utils.js" defer></script>

Времённая шкала:

Парсинг HTML ─────────────────────────────────────────
   ↓
   Скачивание app.js ──┐
   Скачивание utils.js ─┤
                       └─→ Выполнение (после парсинга)

Характеристики defer:

✅ Загрузка не блокирует парсинг
✅ Выполнение ПОСЛЕ парсинга HTML
✅ Порядок ГАРАНТИРОВАН
✅ Идеален для зависимых скриптов

// script1.js ВСЕГДА выполнится перед script2.js
// даже если script2.js скачается быстрее

<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

// Порядок: script1 → script2 (гарантирован)

Сравнительная таблица

┌─────────────┬────────────┬─────────────┬──────────────┬──────────────────┐
│ Атрибут     │ Загрузка   │ Выполнение  │ Порядок      │ Когда выполняется │
├─────────────┼────────────┼─────────────┼──────────────┼──────────────────┤
│ (без атр.)  │ Блокирует  │ Блокирует   │ Гарантирован │ Сразу при встрече │
│ async       │ Параллель  │ Блокирует   │ НЕ гарант.   │ После загрузки    │
│ defer       │ Параллель  │ Не блокирует│ Гарантирован │ После парсинга    │
└─────────────┴────────────┴─────────────┴──────────────┴──────────────────┘

Практические примеры

Использовать async:

<!-- Для независимых скриптов -->
<script src="https://cdn.jsdelivr.net/npm/analytics@1.0/script.js" async></script>
<script src="https://cdn.jsdelivr.net/npm/tracker@1.0/script.js" async></script>
<script src="https://cdn.jsdelivr.net/npm/ads@1.0/script.js" async></script>

У этих скриптов нет зависимостей друг от друга, поэтому порядок неважен.

Использовать defer:

<!-- Основной скрипт приложения с зависимостями -->
<script src="/lib/jquery.js" defer></script>
<script src="/lib/lodash.js" defer></script>
<script src="/app.js" defer></script>
<!-- app.js зависит от jquery и lodash -->

Эти скрипты зависят друг от друга, поэтому нужна гарантия порядка.

Современный подход с ES6 модулями:

<!-- ES6 модули автоматически defer -->
<script type="module" src="/app.js"></script>

<!-- Эквивалент:
<script type="module" src="/app.js" defer></script>
-->

Реальный пример

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  
  <!-- Стили (блокирует рендеринг, но это OK) -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Аналитика (не зависит ни от чего, может async) -->
  <script src="https://analytics.example.com/script.js" async></script>
</head>
<body>
  <h1>Заголовок загружается быстро</h1>
  <div id="app"></div>
  
  <!-- React загружаем с defer, он выполнится после парсинга -->
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.js" defer></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.js" defer></script>
  
  <!-- Наш app скрипт зависит от React -->
  <script src="/app.js" defer></script>
</body>
</html>

Интерактивный пример

// Без defeя — блокирует HTML парсинг
<script>console.log("Этот скрипт блокирует парсинг");</script>

// С async — может выполниться в любой момент
<script async>
  // Опасно! document может быть не полностью загружен
  document.addEventListener('DOMContentLoaded', () => {
    console.log("Теперь DOM готов");
  });
</script>

// С defer — безопасно, DOM готов
<script defer>
  // Безопасно! DOM гарантированно загружен
  document.body.appendChild(document.createElement('div'));
</script>

Практические советы

// 1. Для критичного функционала → defer
<script src="/core.js" defer></script>

// 2. Для аналитики/трекинга → async
<script src="analytics.js" async></script>

// 3. Для ES6 модулей → просто type="module"
<script type="module" src="/app.js"></script>

// 4. Для inline скриптов → гарантированный порядок
<script>
  window.config = { apiUrl: 'https://api.example.com' };
</script>
<script defer src="/app.js"></script>

Итоги

async:

Загружается параллельно
Выполняется сразу (может прерывать парсинг)
Порядок НЕ гарантирован
Для независимых скриптов (analytics, tracking)

defer:

Загружается параллельно
Выполняется после парсинга HTML
Порядок ГАРАНТИРОВАН
Для зависимых скриптов (app, framework)

Правило:

async — для скриптов, которые не зависят от других
defer — для скриптов, которые зависят друг от друга
По умолчанию — используй defer (это безопаснее)