Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить атрибут defer у <script>?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Атрибут `defer`** у тега `<script>` відкладає виконання JavaScript-коду доти, доки браузер повністю не завантажить і не обробить HTML-документ. Він дозволяє підключати скрипти в `<head>` без ризику "заморозити" завантаження сторінки. **Ключове:** `defer` завантажує скрипт асинхронно, але виконує його лише після повної побудови DOM, і в порядку підключення.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняАтрибут `defer` у тега `<script>` відкладає виконання JavaScript-коду **доти, доки браузер повністю не завантажить і не обробить HTML-документ**. Він дозволяє підключати скрипти в `<head>` без ризику "заморозити" завантаження сторінки. --- ### 1. Проблема без defer За умовчанням, якщо підключити скрипт так: ```html <script src="main.js"></script> ``` браузер **зупиняє побудову сторінки**, завантажує і виконує `main.js`, і лише потім продовжує читати HTML. Це уповільнює завантаження й відображення контенту (особливо якщо скрипт великий). --- ### 2. Що робить defer Якщо додати `defer`: ```html <script src="main.js" defer></script> ``` Браузер: 1. Починає **завантажувати скрипт асинхронно** (паралельно з HTML); 2. **Не зупиняє** рендеринг сторінки; 3. Виконує скрипт **лише після повного завантаження HTML**, тобто коли DOM готовий. Простіше кажучи: > `defer` = "завантаж заздалегідь, але виконай потім, коли все побудовано". --- ### 3. Коли використовувати `defer` ідеально підходить для **скриптів, які працюють з елементами сторінки (DOM)**: ```html <head> <script src="menu.js" defer></script> <script src="slider.js" defer></script> </head> ``` Обидва скрипти виконаються **у порядку підключення** після завантаження HTML. --- ### 4. Відмінність від async | Атрибут | Як працює | Порядок виконання | |---|---|---| | **без атрибута** | Зупиняє завантаження HTML, виконується одразу | У міру появи | | `async` | Завантажується асинхронно і виконується одразу після завантаження | У довільному порядку | | `defer` | Завантажується асинхронно, виконується після побудови DOM | У порядку підключення | --- ### Підсумок: | Властивість | Значення | |---|---| | Призначення | Відкладає виконання скрипта до завантаження HTML | | Працює лише з | Зовнішніми файлами (`<script src="...">`) | | Пріоритет | Виконується після побудови DOM | | Порядок виконання | Зберігається як у коді | | Перевага | Прискорює завантаження сторінки і не блокує рендеринг | --- **Простими словами:** `defer` каже браузеру: > "Завантаж цей скрипт зараз, але запусти його, коли сторінка повністю завантажиться". Це робить сайт швидшим і запобігає помилкам, коли JavaScript намагається звернутися до елементів, яких ще немає в DOM.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.