defer HTML атрибут - відкладене виконання скрипта
Атрибут defer вказує браузеру, що скрипт потрібно завантажувати паралельно з парсингом HTML, але виконувати його лише після того, як документ повністю завантажиться.
Атрибут defer є булевим для елемента <script>. Коли браузер натрапляє на скрипт з атрибутом defer, він продовжує парсити HTML-документ, одночасно завантажуючи скрипт у фоновому режимі. Скрипт виконається тільки після завершення парсингу документа, але перед подією DOMContentLoaded. Скрипти з атрибутом defer виконуються у порядку їх появи в документі.
Варто зазначити, що атрибут defer працює лише для зовнішніх скриптів (з атрибутом src). Для вбудованих скриптів він не має ефекту.
Синтаксис
<script src="app.js" defer></script>Приклади використання
<!DOCTYPE html>
<html>
<head>
<!-- Скрипт завантажується паралельно з HTML -->
<script src="analytics.js" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<h1>Моя сторінка</h1>
<p>Контент сторінки...</p>
<!-- Скрипти виконаються після парсингу HTML -->
</body>
</html>Порівняння defer та async
deferСкрипти завантажуються паралельно і виконуються після парсингу HTML у порядку, в якому вони з'являються. Це ідеальний варіант для скриптів, які залежать від DOM або один від одного.
asyncСкрипти завантажуються одночасно і виконуються відразу після завершення завантаження, без гарантії дотримання порядку. Це підходить для незалежних скриптів, таких як аналітика чи реклама.
Підтримка браузерів
defer |
|---|