Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить async у <script>?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`async`** - це атрибут для `<script>`, який каже браузеру завантажити скрипт асинхронно (паралельно з HTML) і виконати його одразу після завантаження, не чекаючи побудови DOM та інших скриптів. **Ключове:** порядок виконання декількох `async`-скриптів не гарантується - хто раніше завантажився, той раніше виконався.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Визначення > `async` - це атрибут для `<script>`, який каже браузеру: > > "Завантаж цей скрипт **асинхронно** (паралельно з HTML) і **виконай його одразу після завантаження**, > **не чекаючи** побудови DOM та інших скриптів." --- ## 1. Як працює звичайний `<script>` ```javascript <script src="app.js"></script> ``` Що робить браузер: 1. Починає читати HTML. 2. Зустрічає `<script>`. 3. Зупиняє парсинг HTML. 4. Завантажує `app.js`. 5. Виконує `app.js`. 6. Продовжує HTML далі. Тобто звичайний `<script>` **блокує завантаження сторінки** до виконання. --- ## 2. Що робить `async` ```javascript <script src="app.js" async></script> ``` Тепер: 1. Браузер продовжує завантажувати HTML. 2. Паралельно завантажує `app.js` у фоні. 3. Щойно `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 готовий"Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.