Пошук уроків, статей та іншого контенту
Способи підключення скриптів за допомогою async та defer
Спосіб підключення JavaScript впливає на порядок завантаження сторінки.
Розглянемо три варіанти:
<script src="app.js"></script>
<script src="app.js" async></script>
<script src="app.js" defer></script>Вони поводяться по-різному.
<script src="app.js"></script>Коли HTML-парсер зустрічає такий тег, браузеру може знадобитися призупинити подальший розбір документа, завантажити скрипт і виконати його.
Спрощено:
HTML parsing
██████████
script download
█████
script execute
██
HTML parsing
███████████Це може затримувати обробку сторінки.
<script src="app.js" defer></script>Скрипт завантажується паралельно з обробкою HTML, але виконується після завершення парсингу документа.
HTML: ███████████████████
Script: ███████ download
executeЦе зручно для скриптів, які працюють із DOM.
<head>
<script src="app.js" defer></script>
</head>Якщо є декілька defer-скриптів:
<script src="one.js" defer></script>
<script src="two.js" defer></script>їх порядок виконання зберігається відповідно до порядку в документі.
<script src="analytics.js" async></script>Скрипт також завантажується паралельно, але виконується, щойно буде готовий.
Тобто він не чекає завершення повного парсингу HTML.
HTML: ███████████ █████████
Script: ███████
executeЧерез це async добре підходить для незалежних скриптів.
Наприклад:
аналітика;
реклама;
зовнішні віджети;
скрипти, які не залежать від DOM або інших скриптів.
Просте правило:
Скрипт залежить від DOM?
→ defer
Скрипт незалежний і може виконатися будь-коли?
→ asyncДля основного JavaScript вебзастосунку часто використовують defer або type="module".
Використовувати async для залежних скриптів.
Якщо:
<script src="library.js" async></script>
<script src="app.js" async></script>немає гарантії, що library.js виконається першим.
Вважати async швидшою версією defer. Вони вирішують різні задачі.
Додавати async без розуміння порядку виконання. Це може створювати помилки, які проявляються не кожного разу.
async та defer дозволяють ефективніше завантажувати JavaScript.
Запам'ятайте:
defer
→ завантаження паралельно
→ виконання після HTML parsing
→ порядок скриптів зберігається
async
→ завантаження паралельно
→ виконання одразу після завантаження
→ порядок не гарантуєтьсяДля більшості скриптів, що працюють зі сторінкою, defer є передбачуванішим вибором.