## Порівняння | Варіант | Блокує HTML? | Коли виконується? | Порядок гарантований? | Для чого | | --------------- | -----------: | ------------------------- | --------------------------: | ------------------------------------------ | | `script` | Так | Одразу після завантаження | Так | Старий підхід або коли блокування потрібне | | `defer` | Ні | Після парсингу HTML | Так | Основний JS сайту | | `async` | Частково | Одразу після завантаження | Ні | Незалежні зовнішні скрипти | | `type="module"` | Ні | Як `defer` | Так, з урахуванням імпортів | Сучасний JS з `import/export` | --- ## Практичні рекомендації ### Для звичайного сайту Найчастіше: ```html ``` Це найкращий дефолт. --- ### Для сучасного JavaScript з модулями ```html ``` І далі: ```javascript import { initApp } from './app.js'; initApp(); ``` --- ### Для аналітики ```html ``` --- ### Для скрипта, який має виконатися прямо зараз ```html ``` Але таке треба використовувати обережно, бо воно блокує HTML. --- ## Типові помилки ### Помилка 1: JS у `` без `defer` ```html ``` ```javascript document.querySelector('#btn').addEventListener('click', () => {}); ``` Проблема: кнопки ще немає в DOM. Краще: ```html ``` --- ### Помилка 2: використовувати `async` для залежних файлів ```html ``` Проблема: `main.js` може виконатися раніше, ніж `helpers.js`. Краще: ```html ``` Або через модулі: ```html ``` ```javascript import './helpers.js'; ``` --- ### Помилка 3: писати `defer` для inline-скрипта ```html ``` `defer` працює для зовнішніх скриптів із `src`. Правильно: ```html ``` --- ## Хороший фінальний приклад ```html Scripts in HTML

Counter

0 ``` ```javascript const countElement = document.querySelector('#count'); const incrementButton = document.querySelector('#increment'); const decrementButton = document.querySelector('#decrement'); let count = 0; incrementButton.addEventListener('click', () => { count++; countElement.textContent = String(count); }); decrementButton.addEventListener('click', () => { count--; countElement.textContent = String(count); }); ``` Тут `defer` гарантує, що JS виконається після того, як кнопки вже існують у DOM. --- ## Короткий висновок `script` без атрибутів блокує HTML і виконується одразу. `defer` - найкращий варіант для основного JavaScript сайту. `async` - для незалежних зовнішніх скриптів, типу аналітики. `type="module"` - для сучасного JavaScript з `import` та `export`, і він поводиться як `defer` за замовчуванням. Практичне правило просте: ```html ``` для класичного JS. ```html ``` для сучасного модульного JS.

Скрипти в HTML

Скрипти в HTML