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