| title | description | authors | keywords | related | tags | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
Атрибуты `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>Первым выполнится тот скрипт, который быстрее загрузится.
Поддерживается всеми браузерами, кроме IE9-.
Указывает браузеру, что скрипт должен выполняться после разбора документа, но до события DOMContentLoaded.
Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded до тех пор, пока скрипт не будет загружен полностью и не завершится его инициализация.
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>Первым всегда выполнится script1.js, который подключён раньше. Даже если script2.js загрузится раньше, он будет выполнен после первого скрипта.
На практике defer используется для скриптов, которым требуется доступ ко всему DOM-дереву или если важен их порядок выполнения.
А async хорош для независимых скриптов, например счётчиков и рекламы, порядок выполнения которых не играет роли.
💡 Динамически вставленный <script> (например, вставленный при помощи document.createElement) по умолчанию загружается браузером асинхронно.