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

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

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

async

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

Пример:

html

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

defer

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

Пример:

html

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

Сравнение

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