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

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

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

async

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

Пример:

html

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

defer

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