Skip to main content

Що робить атрибут async у <script>?

HTMLJunior~1 хв читання
Запропонувати правку

Атрибут async у тега <script> змушує браузер завантажувати й виконувати скрипт асинхронно, тобто паралельно із завантаженням HTML-документа, без очікування завершення побудови сторінки.

1. Як працює

Якщо підключити звичайний скрипт:

html
<script src="app.js"></script>

Браузер:

  1. Зупиняє читання HTML;
  2. Завантажує app.js;
  3. Виконує його;
  4. Потім продовжує будувати сторінку.

Недолік: сторінка "зависає" на час завантаження скрипта.

2. Що робить async

html
<script src="app.js" async></script>

Браузер:

  1. Завантажує HTML і app.js одночасно;
  2. Коли скрипт завантажиться, одразу виконує його, не чекаючи кінця HTML;
  3. Після виконання продовжує будувати сторінку.

Це прискорює завантаження, тому що HTML і JS не блокують один одного.

3. Коли використовувати async

async підходить для скриптів, які не залежать від DOM та інших JS-файлів, наприклад:

  • лічильники аналітики (Google Analytics, Mixpanel);
  • рекламні блоки;
  • віджети або трекери, які просто збирають дані.

Приклад:

html
<script src="https://www.googletagmanager.com/gtag/js" async></script>

4. Відмінність async від defer

АтрибутКоли виконуєтьсяЗберігає порядокВикористовується для
без атрибутаОдразу під час завантаження (блокує HTML)ТакМалі вбудовані скрипти
asyncЩойно завантажився, не чекаючи HTMLНіНезалежні скрипти
deferПісля повного завантаження HTMLТакСкрипти, що працюють з DOM

5. Приклад порівняння

html
<!-- async --> <script src="analytics.js" async></script> <!-- defer --> <script src="main.js" defer></script>
  • analytics.js завантажиться і виконається, щойно буде готовий (у довільний момент).
  • main.js зачекає, поки сторінка повністю завантажиться, і лише потім виконається.

Підсумок:

ВластивістьЗначення
ПризначенняАсинхронне завантаження і виконання скрипта
Коли виконуєтьсяЩойно скрипт завантажиться
Затримує побудову сторінкиНі
Порядок виконанняНепередбачуваний
Ідеально дляНезалежних або зовнішніх скриптів

Простими словами: async каже браузеру:

"Завантажуй цей скрипт, не зупиняючи сторінку, і запускай одразу, щойно він буде готовий".

Це прискорює завантаження сайту, якщо скрипт не залежить від інших частин сторінки.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку