Чем отличаются async и defer у тега script и где лучше подключать скрипты?

async и defer позволяют загружать скрипт параллельно с разбором HTML, но запускаются в разные моменты.

• обычный `<script>` — Загрузка: блокирует парсинг; Выполнение: сразу; Порядок: как в документе
• `async` — Загрузка: параллельно; Выполнение: сразу после загрузки; Порядок: непредсказуемый
• `defer` — Загрузка: параллельно; Выполнение: после разбора HTML, до DOMContentLoaded; Порядок: как в документе

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

Что выбрать

• defer — для кода приложения и скриптов, зависящих друг от друга или от DOM.
• async — для независимых скриптов: аналитика, счётчики.
• type="module" по умолчанию ведёт себя как defer.

Раньше скрипты ставили в конец <body>. Современный подход: подключать в <head> с defer, тогда загрузка начинается раньше, а разбор страницы не блокируется.

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

async выполняет скрипт сразу после загрузки без гарантии порядка, defer ждёт конца разбора HTML и сохраняет порядок. Для своих скриптов обычно ставят defer в <head>.