В чем разница между подключением скриптов с атрибутами async и defer?

Атрибуты async и defer используются для управления загрузкой внешних JavaScript-файлов и влияют на порядок исполнения скриптов и время загрузки страницы.

Основное отличие заключается в порядке исполнения скриптов и блокировке парсинга HTML.

async

• Скрипт загружается асинхронно в фоновом режиме, не блокируя парсинг HTML.
• После завершения загрузки, парсинг HTML приостанавливается, скрипт исполняется.
• Порядок исполнения скриптов с атрибутом async не гарантирован. Они исполняются сразу после загрузки, в порядке, отличном от порядка их упоминания в HTML, в зависимости от скорости загрузки каждого файла.
• Подходит для независимых скриптов, не влияющих друг на друга или на DOM во время его парсинга.

Пример:

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

В этом случае script1.js и script2.js загрузятся одновременно, но кто из них исполнится первым, неизвестно.

defer

• Скрипт загружается асинхронно в фоновом режиме, не блокируя парсинг HTML.
• Исполнение скриптов откладывается до момента, когда весь HTML будет полностью распарсен.
• Скрипты с атрибутом defer исполняются в том порядке, в котором они указаны в HTML.
• Подходит для скриптов, которые зависят от полного DOM-дерева или зависят друг от друга.

Пример:

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

В этом случае script1.js и script2.js загрузятся одновременно, но script1.js гарантированно исполнится до script2.js, и оба скрипта будут исполнены только после парсинга HTML.

Сравнение

Характеристика	async	defer
Загрузка	Асинхронная (не блокирует парсинг HTML)	Асинхронная (не блокирует парсинг HTML)
Исполнение	Сразу после загрузки (может прервать парсинг)	После полного парсинга HTML
Порядок исполнения	Не гарантирован	В порядке следования в HTML
Зависимость от DOM	Не должен зависеть от полного DOM	Может зависеть от полного DOM

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