Чем отличаются async и defer при подключении скриптов?

Оба атрибута используются для оптимизации загрузки JavaScript, но подходят для разных задач.

Основное различие

async ориентирован на независимые скрипты, а defer — на скрипты, работающие с DOM.

Поведение async

1. Скрипт загружается параллельно HTML

2. Выполняется сразу после загрузки

3. Может выполниться до завершения построения DOM

4. Не гарантирует порядок выполнения

Поведение defer

1. Скрипт загружается параллельно HTML

2. Выполняется после завершения парсинга HTML

3. DOM полностью доступен

4. Порядок выполнения сохраняется

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

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

vendor.js выполнится перед app.js, даже если загрузится позже.

Практические рекомендации

• async — аналитика, трекеры, независимые скрипты

• defer — основной код приложения, работа с DOM

Вывод

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