Атрибуты defer и async

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

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

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

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

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

Скопировать ссылку "На собеседовании" Скопировано

Задать вопрос в рубрику

🤚 Я знаю ответ

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