Різниця між script, async та defer
Тег <script> використовується для підключення JavaScript файлів до HTML документів. Залежно від атрибутів async та defer, поведінка завантаження та виконання скриптів змінюється.
script (без атрибутів)
- Завантажується та виконується негайно щойно парсер HTML досягає його.
- Блокує парсинг HTML до завершення виконання скрипту.
- Підходить лише для малих скриптів в кінці сторінки.
html
<script src="script.js"></script>script async
- Скрипт завантажується асинхронно та виконується негайно після завантаження.
- Не гарантує порядок виконання (якщо кілька асинхронних скриптів).
- Підходить для скриптів третіх сторін (аналітика, реклама).
Поведінка:
- Не блокує парсинг HTML під час завантаження.
- Може заблокувати рендеринг під час виконання.
script defer
- Скрипт завантажується асинхронно, але виконується після повного завантаження HTML.
- Зберігає порядок підключення скриптів.
- Ідеально підходить для більшості сучасних застосунків.
html
<script src="script.js" defer></script>Поводження:
- Не блокує HTML.
- Виконується після завершення парсингу HTML, але перед подією
DOMContentLoaded.
Таблиця порівняння
| Атрибут | Завантаження | Виконання | Блокує парсинг? | Зберігає порядок? |
|---|---|---|---|---|
(без атрибутів) | негайно | негайно після завантаження | Так | Так |
async | паралельно | негайно після завантаження | Ні (але може заблокувати виконання) | Ні |
defer | паралельно | після парсингу HTML | Ні | Так |
Порада:
Якщо ви не використовуєте type="module", завжди віддавайте перевагу defer для внутрішніх скриптів — це не блокує HTML і зберігає порядок.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.