Порівняйте атрибути підключення скрипту async і defer в HTML-документі.

Повне пояснення

Що це і навіщо

• async: завантажує скрипт асинхронно, не блокуючи парсинг HTML. Скрипт виконується одразу після завантаження, незалежно від того, чи завершено парсинг.
• defer: також завантажує скрипт асинхронно, але гарантує виконання лише після завершення парсингу всього документа. Скрипти з defer виконуються у тому порядку, в якому вони оголошені.

Ключові принципи/терміни

• парсинг DOM – процес побудови дерева елементів.
• завантаження (fetch) – отримання файлу скрипта.
• виконання – запуск коду в контексті сторінки.

Як це працює

1. Браузер читає HTML, натрапляючи на тег <script>.
2. Якщо атрибут async присутній, браузер відразу ініціює завантаження скрипта в окремому потоці, не зупиняючи парсинг.
3. Якщо атрибут defer присутній, браузер також завантажує скрипт паралельно, але ставить його у чергу виконання.
4. Після завершення парсингу DOM браузер виконує всі скрипти з defer у порядку їх появи.
5. Скрипт з async виконується, коли завантаження завершено, що може статися в будь-який момент.

Практика і реалізація

<script src="analytics.js" async></script>
<script src="app.js" defer></script>

• analytics.js не залежить від DOM, тому його можна виконати в будь‑який момент.
• app.js потребує, щоб DOM був готовий, тому використовується defer.

Тестування

• Для перевірки порядку виконання можна використати console.log у скриптах і спостерігати порядок в консолі.
• У Jest можна мокнути document.createElement і перевірити, що скрипти додаються з правильними атрибутами.

Особливості в контексті веб‑розробки

• async підходить для сторонніх бібліотек (наприклад, Google Analytics), де порядок виконання не критичний.
• defer ідеально для власних скриптів, що маніпулюють DOM або залежать один від одного.

Оптимізація

• Використання defer з усіма внутрішніми скриптами мінімізує блокування рендеру.
• async зменшує час до першого виконання, але може викликати race conditions.

Часті помилки

1. Використання async для скриптів, що модифікують DOM → помилки «document not ready».
2. Змішування async і defer у одному скрипті → непередбачуваний порядок.
3. Не врахування порядку defer → залежності між скриптами порушуються.
4. Додавання async до бібліотек, що очікують глобальних змінних → непередбачувані результати.
5. Використання defer у старих браузерах (IE < 10) → не підтримується.
6. Додавання async до скриптів, що мають внутрішні import → синтаксичні помилки.
7. Неочікуване виконання async скрипта перед завантаженням CSS → зміни стилів можуть бути не застосовані.
8. Підключення великого скрипта з async → блокування CPU, що впливає на інші ресурси.

Cheatsheet

• async: швидке завантаження, виконання коли готово, незалежно від DOM.
• defer: завантаження паралельно, виконання після парсингу DOM, у порядку оголошень.
• script без атрибутів: синхронне завантаження і виконання, блокує парсинг.

Follow‑up питання

1. Які сценарії краще підходять для async?
2. Як впливають async і defer на SEO та швидкість завантаження сторінки?
3. Чи можна комбінувати async і defer у одному скрипті, і що це означає?