Привіт усім! Сподіваюся, у вас все добре. Ця стаття розгляне цікаву тему JavaScript. Атрибути async та defer використовуються при підключенні зовнішніх JavaScript файлів у HTML документи. Вони впливають на те, як браузер завантажує та виконує скрипт. Давайте розглянемо їх детальніше.
За замовчуванням
Зазвичай ми підключаємо нашу HTML сторінку до зовнішнього JavaScript за допомогою
Ось як відбувається парсинг HTML та виконання скриптів
Async
Коли ми підключаємо скрипт з атрибутом async, це означає, що браузер завантажує скрипт асинхронно, поки парсить HTML документ. Скрипт завантажується у фоновому режимі, не блокуючи процес парсингу HTML.
Як тільки скрипт завантажено, він виконується асинхронно, тобто може виконуватись у будь-який момент, навіть до того, як HTML документ буде повністю розібрано.
Якщо кілька скриптів завантажуються асинхронно, вони будуть виконуватись, як тільки завантажаться, незалежно від їх порядку в документі. Це корисно, коли скрипт не залежить від того, чи повністю завантажено DOM або інші скрипти.
Defer
Коли ми підключаємо скрипт з атрибутом defer, це також означає, що браузер завантажує скрипт асинхронно, поки парсить HTML документ.
Однак виконання скрипту відкладене до моменту, коли HTML документ буде повністю розібраний.
Скрипти з атрибутом defer виконуються в тому порядку, в якому вони з’являються в документі. Це корисно, коли скрипт залежить від того, чи повністю розібраний DOM, або коли важливий порядок виконання скриптів.
Висновок
Як async, так і defer дозволяють процесу парсингу HTML продовжуватись без очікування на завантаження скрипта.
Різниця полягає в тому, коли виконується скрипт:
З async скрипт виконується, як тільки він завантажується, можливо, до того, як HTML документ буде повністю розібраний. З defer скрипт виконується лише після того, як HTML документ повністю розібраний, але до події DOMContentLoaded.
Один з важливих моментів, який слід зазначити: ми повинні використовувати async тільки тоді, коли скрипти можуть працювати незалежно і не залежать від структури DOM, а використовуємо defer, коли нам потрібно зберегти порядок виконання скриптів або залежимо від структури DOM.
Сподіваюся, вам сподобалась ця стаття, і якщо так, не забудьте поставити лайк! 😃
Перекладено з: Async vs Defer in JavaScript: Which is Better? 🤔