Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить defer у <script>?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

> `defer` - це атрибут тега `<script>`, який каже браузеру:
>
> "Завантаж цей скрипт **паралельно** з HTML, але **виконай його тільки після того, як весь HTML-документ буде завантажено і розібрано (DOMContentLoaded)**."

## 1. Звичайна поведінка без `defer`

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

Що відбувається:

1. Браузер починає завантажувати HTML.
2. Зустрічає `<script>`.
3. **Зупиняє парсинг HTML**, щоб:
  - завантажити `app.js`,
  - виконати його.
4. Тільки потім продовжує завантажувати сторінку.

У результаті сторінка **завантажується повільніше**, тому що JS блокує HTML.

## 2. Що робить `defer`

```javascript
<script src="app.js" defer></script>
```

Тепер браузер:

1. Починає завантажувати **HTML і JS паралельно**.
2. **Не блокує** парсинг HTML.
3. Виконує `app.js` **тільки після того, як DOM повністю побудований**,
але **до події** `DOMContentLoaded`.

Тобто:

- HTML парситься ->
- скрипт завантажується у фоні ->
- DOM готовий ->
- скрипт виконується ->
- -> спрацьовує `DOMContentLoaded`.

## 3. Приклад різниці

```javascript

<script src="slow.js"></script>
<p>Привіт!</p>

<script src="slow.js" defer></script>
<p>Привіт!</p>
```

З `defer` текст "Привіт!" з'явиться одразу,
поки скрипт ще завантажується.
Без `defer` сторінка зависне, поки не завантажиться `slow.js`.

## 4. Коли скриптів декілька

```javascript
<script src="a.js" defer></script>
<script src="b.js" defer></script>
```

Скрипти з `defer`:

- завантажуються **паралельно**,
- але виконуються **у порядку появи в HTML**.

Це головна відмінність від `async`, де порядок **не гарантується** (див. нижче).

## 5. Відмінність `defer` від `async`

| Атрибут | Коли завантажується | Коли виконується | Гарантований порядок | Типовий сценарій |
|---|---|---|---|---|
| *(без атрибута)* | Одразу при зустрічі | Одразу (блокує HTML) | Так | Старий JS у `<head>` |
| **async** | Паралельно з HTML | Одразу після завантаження (не чекає DOM) | Ні | Аналітика, реклама, віджети |
| **defer** | Паралельно з HTML | Після побудови DOM | Так | Основні скрипти застосунку |

## 6. Сумісність

Працює у всіх сучасних браузерах.
Якщо використовувати в `<head>`, це **найправильніший спосіб** підключати JS:

```javascript
<head>
  <script src="main.js" defer></script>
</head>
```

Браузер не блокує завантаження сторінки і гарантує, що твій код виконається,
коли DOM уже готовий.

## 7. Вплив на `DOMContentLoaded`

`DOMContentLoaded` спрацьовує **після** виконання всіх `defer`-скриптів.
Тобто можна бути впевненим, що на момент цієї події твої скрипти вже відпрацювали.

## Підсумок

| Властивість | **Без атрибута** | `async` | `defer` |
|---|---|---|---|
| Завантажує скрипт | Одразу (блокує HTML) | Паралельно | Паралельно |
| Виконує скрипт | Одразу після завантаження | Одразу після завантаження | Після розбору HTML |
| Порядок виконання | По порядку | Довільний | По порядку |
| Блокує HTML | Так | Ні | Ні |
| Чекає DOM | Ні | Ні | Так |

> **Запам'ятай просто:**
>
> - `defer` - "завантаж одразу, виконай потім".
> - Використовуй його для **основних JS-файлів**, щоб сторінка завантажувалася швидко і без "білих екранів".

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати460 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.