В чем разница между async и defer в JavaScript?

Краткий ответ

• async и defer — атрибуты для тега <script>, которые влияют на загрузку и выполнение JavaScript:
  • 🔄 Обычный скрипт (без атрибутов): блокирует парсинг HTML до загрузки и выполнения
  • ⏱️ defer: загружается параллельно с HTML, но выполняется только после парсинга HTML
  • 🏎️ async: загружается параллельно с HTML и выполняется сразу после загрузки, прерывая парсинг HTML

Полный ответ

Как работает загрузка скриптов

Когда браузер загружает HTML-страницу, он последовательно обрабатывает (парсит) HTML-код. При обнаружении тега <script> браузер по умолчанию:

1. Приостанавливает парсинг HTML
2. Загружает скрипт
3. Выполняет скрипт
4. Возобновляет парсинг HTML

Это может значительно замедлить отображение страницы, особенно если скрипты большие или загружаются с медленного сервера.

Атрибут async

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

• ✅ Загружается асинхронно (параллельно с парсингом HTML)
• ⚠️ Выполняется сразу после загрузки, прерывая парсинг HTML
• 🔀 Порядок выполнения не гарантирован (кто загрузился первым, тот и выполнится)
• 🚫 Не ждет DOM-дерево или другие скрипты

Атрибут defer

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

• ✅ Загружается асинхронно (параллельно с парсингом HTML)
• ✅ Выполняется после завершения парсинга HTML, но до события DOMContentLoaded
• ✅ Сохраняет порядок выполнения скриптов (как указано в HTML)
• ✅ Гарантирует доступность DOM-дерева при выполнении

Сравнение в виде таблицы

Пример использования

<!-- Аналитика: не зависит от DOM, порядок не важен -->
<script async src="analytics.js"></script>
 
<!-- Библиотека UI: нужен DOM и порядок важен -->
<script defer src="ui-framework.js"></script>
<script defer src="app.js"></script>

Когда что использовать

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

  • Аналитика (Google Analytics)
  • Трекеры
  • Виджеты соцсетей

• defer: для скриптов, которым нужен полностью построенный DOM или которые зависят от других скриптов

  • Основной код приложения
  • Библиотеки UI
  • Скрипты, манипулирующие DOM

• Без атрибутов: когда скрипт должен выполниться до отображения страницы

  • Критически важный код
  • Полифиллы для старых браузеров