defer, async
Атрибуты внешнего `<script>`, которые загружают его, не останавливая разбор страницы; различаются тем, когда скрипт выполняется.
Синтаксис
<script src="app.js" defer></script>Параметры
| Параметр | Тип | Описание |
|---|---|---|
| defer | boolean | Выполнить после разбора всего HTML, в порядке появления скриптов на странице. |
| async | boolean | Выполнить, как только файл загрузится, в любом порядке, возможно до конца разбора страницы. |
Примеры
Скрипт с defer может спокойно обращаться к элементам, которые идут после него:
<script defer src="data:text/javascript,document.getElementById('msg').textContent='Set by a deferred script'"></script>
<p id="msg">Waiting…</p>Примечания
Выбирайте defer для своего кода: он сохраняет порядок, и DOM уже готов. async — для независимых скриптов вроде аналитики, которым не важны страница и другие скрипты. Оба работают только вместе с src; у встроенного скрипта их игнорируют. Скрипты-модули (type="module") по умолчанию ведут себя как defer.
См. также
- <script> — Подключает или встраивает JavaScript; `<noscript>` показывает запасное содержимое, если скрипты выключены.
- <head> — Служебная часть страницы: кодировка, заголовок вкладки, подключение стилей и скриптов.
- fetchpriority — Подсказка, насколько срочен ресурс по сравнению с другими того же типа, — например, чтобы главный баннер загрузился раньше остальных картинок.
В учебнике
- Структура документа — Каркас HTML-страницы — doctype, html, head и body, кодировка, заголовок вкладки, viewport и первый файл index.html.