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

JavaScriptJunior~2 хв читання

Визначення

async - це атрибут для <script>, який каже браузеру:

"Завантаж цей скрипт асинхронно (паралельно з HTML) і виконай його одразу після завантаження, не чекаючи побудови DOM та інших скриптів."

1. Як працює звичайний `<script>`

javascript

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

Що робить браузер:

Починає читати HTML.
Зустрічає <script>.
Зупиняє парсинг HTML.
Завантажує app.js.
Виконує app.js.
Продовжує HTML далі.

Тобто звичайний <script> блокує завантаження сторінки до виконання.

2. Що робить `async`

javascript

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

Тепер:

Браузер продовжує завантажувати HTML.
Паралельно завантажує app.js у фоні.
Щойно app.js завантажився, одразу виконує його, навіть якщо HTML ще не закінчено.

Тобто:

завантаження асинхронне,
виконання миттєве,
порядок з іншими скриптами не гарантується.

3. Візуально

javascript

HTML:   |-----парсинг-----|-------->
JS:     |---завантаження--|виконання|

HTML і JS завантажуються паралельно, але виконання JS може перервати HTML-парсинг, якщо скрипт закінчить завантаження раніше.

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

Атрибут	Коли виконується скрипт	Порядок	Блокує HTML	Коли використовувати
(без атрибута)	Одразу при зустрічі	по порядку	Так	Старий inline-код
`async`	Одразу після завантаження	випадковий	Може перервати	Незалежні скрипти (аналітика, реклама)
`defer`	Після побудови DOM	по порядку	Ні	Основний код сайту

Головне:

async -> "запускай, коли готовий, не чекай нікого"
defer -> "чекай, поки DOM побудується, потім запускай по порядку"

5. Приклад

javascript

<script src="analytics.js" async></script>
<script src="main.js" defer></script>

analytics.js - незалежний, можна запустити одразу main.js - залежить від DOM, виконається після його побудови

6. Приклад з кількома `async`-скриптами

javascript

<script src="a.js" async></script>
<script src="b.js" async></script>

Вони можуть виконатися в будь-якому порядку - залежить від того, який файл завантажиться раніше.

7. Спільне використання з `<head>`

async і defer працюють тільки для зовнішніх скриптів (src="..."). Вбудовані (<script>...</script>) ігнорують ці атрибути.

Приклад правильного підключення:

javascript

<head>
  <script src="vendor.js" async></script>
  <script src="main.js" defer></script>
</head>

Підсумок

Властивість	`async`	`defer`
Завантажує паралельно з HTML	Так	Так
Виконує, коли завантажиться	Так	Ні
Чекає готовності DOM	Ні	Так
Зберігає порядок скриптів	Ні	Так
Блокує парсинг HTML при виконанні	Може	Ні
Ідеально для	Незалежних скриптів (аналітика, реклама, віджети)	Основної логіки сайту

Запам'ятай просто:

async - "завантаж і виконай якомога швидше"

defer - "завантаж заздалегідь, але почекай, поки DOM готовий"

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

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

Premium

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