Атрибуты defer и async

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

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

Кратко

Скопировано

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

Как пишется

Скопировано

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

Как понять

Скопировано

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

Скопировано

Указывает браузеру что скрипт должен выполняться после разбора документа, но до события 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) по умолчанию загружается браузером асинхронно.

На собеседовании

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.