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

`async` и `defer` — атрибуты тега `<script>`, управляющие загрузкой и выполнением внешних скриптов без блокировки парсинга HTML. Отличаются моментом и порядком выполнения.

Обычный script (без атрибутов)

Блокирует парсинг: браузер останавливается, скачивает и выполняет скрипт, затем продолжает разбор HTML.

async

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

defer

• Скрипт загружается параллельно с парсингом.
• Выполняется после полного построения DOM, перед DOMContentLoaded.
• Порядок выполнения сохраняется как в разметке.
• Подходит для скриптов, зависящих от DOM или друг от друга.

<script async src="analytics.js"></script>
<script defer src="app.js"></script>

Как выбрать

• Скрипт независим и не трогает DOM → async.
• Скрипт работает с DOM или зависит от других → defer.

Коротко для собеседования

Оба грузят скрипт параллельно с парсингом. async выполняет сразу по загрузке без гарантии порядка; defer — после построения DOM, сохраняя порядок. Для зависимых скриптов — defer, для независимых — async.