HTML-атрибут async
Атрибут async — это boolean-атрибут, указывающий на асинхронное выполнение скрипта. Узнайте, для какого элемента он используется.
Атрибут async — это boolean-атрибут, используемый на элементе <script>. Он сообщает браузеру загружать внешний скрипт без остановки разбора HTML и выполнять его сразу после завершения загрузки.
Атрибут работает только для внешних скриптов, поэтому должен использоваться вместе с атрибутом src. Добавление async к встроенному скрипту (с JavaScript, написанным непосредственно между тегами) не даёт никакого эффекта — браузер его игнорирует.
Зачем нужен async
В обычном режиме, когда браузер встречает тег <script src="...">, он останавливает разбор HTML, загружает файл, выполняет его и только после этого продолжает строить страницу. При медленном соединении это блокирует рендеринг и делает страницу медленной.
async убирает загрузку скрипта с критического пути: браузер продолжает разбирать и строить страницу, пока скрипт загружается в фоновом режиме. Результат — быстрая, неблокирующая загрузка скриптов.
async, defer и без атрибута
Внешний скрипт можно загрузить тремя способами. Разница состоит в том, когда он загружается и когда выполняется относительно разбора HTML.
| Поведение | Загрузка | Выполнение | Порядок сохраняется? |
|---|---|---|---|
| Без атрибута (по умолчанию) | Блокирует разбор | Сразу, до продолжения разбора | Да |
async | Параллельно, без блокировки | Как только файл готов (может прервать разбор) | Нет |
defer | Параллельно, без блокировки | После завершения разбора, до DOMContentLoaded | Да |
<!-- Blocks parsing until downloaded and run -->
<script src="example.js"></script>
<!-- Downloads in parallel, runs the moment it arrives -->
<script src="example.js" async></script>
<!-- Downloads in parallel, runs after the HTML is fully parsed -->
<script src="example.js" defer></script>Ключевые моменты:
- Используйте
asyncдля независимых скриптов, которые не зависят от страницы или от других скриптов (аналитика, рекламные теги, трекеры). - Используйте
defer, когда скрипту нужен полный DOM или когда несколько скриптов должны выполняться в фиксированном порядке. - Элемент
<script type="module">откладывается по умолчанию, поэтому добавлять к немуdeferне нужно; добавлениеasyncк модулю заставляет его выполниться сразу после загрузки.
Порядок выполнения не гарантируется при async
При использовании async скрипты выполняются в том порядке, в каком заканчивается их загрузка, — а не в том, в каком они расположены в HTML. Это нарушает работу любого скрипта, зависящего от другого.
<!-- BAD: jquery.js may finish AFTER app.js, so $ is undefined when app.js runs -->
<script src="jquery.js" async></script>
<script src="app.js" async></script>Если второй скрипт зависит от первого, используйте вместо этого defer — отложенные скрипты всегда выполняются сверху вниз:
<!-- GOOD: jquery.js is guaranteed to run before app.js -->
<script src="jquery.js" defer></script>
<script src="app.js" defer></script>Синтаксис
<script src="example.js" async></script>Пример HTML-атрибута async
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="example.js" async></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p>
A browser that doesn’t support JavaScript will display the content inside the noscript element.
</p>
<script>
document.write("My first JavaScript example!")
</script>
</body>
</html>