Чем отличаются атрибуты async и defer у тега script? Как они влияют на загрузку и выполнение JavaScript?

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

• async

  • Скрипт загружается асинхронно, параллельно с загрузкой HTML.
  • Выполняется сразу после загрузки, не дожидаясь полной загрузки HTML.
  • Выполнение скриптов с async не гарантирует порядок, если несколько таких скриптов.
  • Используется для независимых скриптов, не зависящих от DOM или других скриптов.

• defer

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

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

Пример использования:

<script src="script1.js" async></script> <!-- загружается и выполняется сразу после загрузки -->
<script src="script2.js" defer></script> <!-- загружается параллельно, выполняется после парсинга -->