Атрибуты defer и async

С помощью этих атрибутов можно сказать браузеру как и в каком порядке загружать скрипты

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Как пишется

Секция статьи "Как пишется"

Оба атрибута являются логическими. Это значит, что им не нужно задавать значение. Если атрибут указан, то браузер понимает это как команду к действию. Чтобы отменить эффект достаточно убрать атрибут.

Как понять

Секция статьи "Как понять"

Обычно браузеры загружают <script> синхронно, во время разбора документа. Поэтому принято добавлять скрипты в конец документа, перед </body>, чтобы они не тормозили загрузку страницы. Но при помощи атрибутов defer и async можно явно управлять порядком загрузки и выполнения скриптов.

Атрибут async

Секция статьи "Атрибут async"

Указывает браузеру по возможности загружать скрипт асинхронно.

Скрипт выполняется полностью асинхронно. Это означает, что файл будет выполняться без ожидания загрузки и отображения веб-страницы. При обнаружении <script async src="..."> браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.

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

        
        
          
        
      

Первым выполнится тот скрипт, который быстрее загрузится.

Поддерживается всеми браузерами, кроме IE9-.

Атрибут defer

Секция статьи "Атрибут defer"

Указывает браузеру что скрипт должен выполняться после разбора документа, но до события DOMContentLoaded.

Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.

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

        
        
          
        
      

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

Применение

Секция статьи "Применение"

На практике defer используется для скриптов, которым требуется доступ ко всему DOM-дереву или если важен их порядок выполнения.

А async хорош для независимых скриптов, например счётчиков и рекламы, порядок выполнения которых не играет роли.

Подсказки

Секция статьи "Подсказки"

💡 Динамически вставленный <script> (например, вставленный при помощи document.createElement) по умолчанию загружается браузером асинхронно.