Расскажи про атрибуты defer и async у тега script. Чем они отличаются?

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

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

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

Если не использовать ни async, ни defer, скрипт блокирует парсинг HTML до своей загрузки и выполнения.

Пример:

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

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