Devs Hive
Повернутися до всіх запитань

Яка різниця між async та defer?

MiddleSeniorJavaScript
Зустрічали на інтервʼю:1 користувач

Це питання часто задають в контексті оптимізації frontend частини продукту. Async і Defer - це атрибути, які використовуються в тегу для підключення зовнішніх JS файлів. Обидва дозволяють НЕ блокувати парсинг HTML під час завантаження скриптів, але вони по-різному поводяться під час виконання. Розберемо, як завантажуються скрипти без додаткових атрибутів і з атрибутами async/defer:

Без атрибутів

Завантаження зовнішніх скриптів блокує парсинг HTML, і все виконується синхронно. Якщо підключити кілька скриптів у <head>, браузер буде чекати, поки не завантажить і не виконає кожен із них.

<head>
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
</head>
<body>
<!-- Парсинг HTML буде чекати завершення завантаження і виконання скриптів -->
<h1>Hello</h1>
</body>

Async

При такому підході, завантаження скриптів не буде блокувати парсинг HTML і відбуватиметься паралельно. Скрипт виконається одразу після завантаження, навіть якщо парсинг HTML ще НЕ завершено.

<head>
<script src="a.js" async></script>
<script src="b.js" async></script>
<script src="c.js" async></script>
</head>
<body>
<!--
Скрипти виконаються в рандомному порядку,
так як з async порядок виконання не гарантований
-->
<h1>Hello</h1>
</body>

Defer

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

<head>
<script src="a.js" defer></script>
<script src="b.js" defer></script>
<script src="c.js" defer></script>
</head>
<body>
<!-- Виконання буде після DOMContentLoaded, порядок збережений: a → b → c -->
<h1>Hello</h1>
</body>

Зустрічав на інтервʼю?

Коментарі (0)

Увійдіть, щоб залишити коментар

Поки що немає коментарів. Будьте першим!