Объясните атрибуты async и defer у тега script. Что это такое и в чём отличие?
Answer from AI
sobes.tech AI
Атрибуты async и defer у тега <script> управляют загрузкой и выполнением JavaScript-файлов, влияя на производительность и поведение страницы.
-
async— скрипт загружается асинхронно параллельно с загрузкой HTML, и выполняется сразу после загрузки, не дожидаясь полной загрузки документа. Это хорошо для независимых скриптов, которые не зависят от DOM или других скриптов. -
defer— скрипт тоже загружается асинхронно, но его выполнение откладывается до тех пор, пока весь HTML не будет полностью загружен и разобран. Скрипты сdeferвыполняются в порядке их появления в документе.
Основное отличие:
| Атрибут | Загрузка | Выполнение | Порядок выполнения |
|---|---|---|---|
| async | Асинхронно | Сразу после загрузки скрипта | Не гарантируется |
| defer | Асинхронно | После парсинга HTML | В порядке появления в документе |
Если скрипт влияет на DOM или зависит от других скриптов, лучше использовать defer. Если скрипт независимый и не влияет на DOM, можно использовать async.