Що робить атрибут defer у <script>?
Атрибут defer у тега <script> відкладає виконання JavaScript-коду доти, доки браузер повністю не завантажить і не обробить HTML-документ.
Він дозволяє підключати скрипти в <head> без ризику "заморозити" завантаження сторінки.
1. Проблема без defer
За умовчанням, якщо підключити скрипт так:
<script src="main.js"></script>браузер зупиняє побудову сторінки,
завантажує і виконує main.js, і лише потім продовжує читати HTML.
Це уповільнює завантаження й відображення контенту (особливо якщо скрипт великий).
2. Що робить defer
Якщо додати defer:
<script src="main.js" defer></script>Браузер:
- Починає завантажувати скрипт асинхронно (паралельно з HTML);
- Не зупиняє рендеринг сторінки;
- Виконує скрипт лише після повного завантаження HTML, тобто коли DOM готовий.
Простіше кажучи:
defer= "завантаж заздалегідь, але виконай потім, коли все побудовано".
3. Коли використовувати
defer ідеально підходить для скриптів, які працюють з елементами сторінки (DOM):
<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.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.