Чем отличаются атрибуты async и defer у тега script?

Атрибуты async и defer у тега <script> управляют загрузкой и выполнением JavaScript, чтобы не блокировать рендеринг страницы:

• async — скрипт загружается асинхронно параллельно с парсингом HTML, и выполняется сразу после загрузки, не дожидаясь окончания парсинга. Порядок выполнения скриптов с async не гарантируется.

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

Пример:

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

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

Используйте defer для скриптов, которые зависят от DOM, и async для независимых скриптов, например аналитики.