Разница между script, async и defer

Тег <script> используется для подключения JavaScript-файлов к HTML-документу. В зависимости от атрибутов async и defer, поведение загрузки и выполнения скрипта меняется.

script (без атрибутов)

• Скачивается и выполняется сразу, как только до него дойдет парсер HTML.
• Блокирует парсинг HTML до завершения выполнения скрипта.
• Подходит только для маленьких скриптов в конце страницы.

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

Поведение:

script async

• Скрипт загружается асинхронно и выполняется сразу, как только загрузился.
• Не гарантирует порядок выполнения (если несколько async-скриптов).
• Подходит для сторонних скриптов (аналитика, реклама).

Поведение:

• Не блокирует HTML-парсинг во время загрузки.
• Может блокировать рендеринг при выполнении.

script defer

• Скрипт загружается асинхронно, но выполняется после полной загрузки HTML.
• Сохраняет порядок подключения скриптов.
• Идеально для большинства современных приложений.

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

Поведение:

• Не блокирует HTML.
• Выполняется после завершения парсинга HTML, но до события DOMContentLoaded.

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