Как скрипт загружается с атрибутом async

Вопрос

Как скрипт загружается с атрибутом async

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает, как async влияет на загрузку и выполнение скриптов, а также когда его стоит использовать. Важно показать знание отличий от defer и поведения в разных сценариях.

Ключевые тезисы

• Атрибут async указывает браузеру загружать скрипт асинхронно, не блокируя парсинг HTML.
• Скрипт выполняется сразу после загрузки, независимо от порядка в документе.
• Не гарантируется порядок выполнения скриптов с async, если их несколько.
• Используется для скриптов, которые не зависят от других скриптов или DOM.

Подробный ответ

Атрибут async указывает браузеру, что скрипт должен загружаться асинхронно, параллельно с парсингом HTML-документа. Это означает, что загрузка скрипта не блокирует обработку остальной части страницы. Как только скрипт загружается, он сразу же выполняется, независимо от того, завершен ли парсинг документа. Это особенно полезно для скриптов, которые не зависят от других скриптов или DOM-структуры, например, для аналитики или рекламных скриптов. Однако, порядок выполнения скриптов с async не гарантируется, что может привести к проблемам, если один скрипт зависит от другого. В отличие от defer, который также загружает скрипты асинхронно, но гарантирует их выполнение в порядке указания в документе после полного парсинга HTML.

Практические примеры

Пример 1

Пример 1: Использование async для загрузки аналитического скрипта Google Analytics. В этом случае порядок выполнения не важен, так как скрипт самодостаточен.

<script async src="https://www.google-analytics.com/analytics.js"></script>

Пример 2

Пример 2: Неправильное использование async для скриптов, зависящих друг от друга. Например, если script1.js должен выполниться до script2.js, использование async может привести к ошибке, так как порядок выполнения не гарантирован.

<script async src="script1.js"></script>
<script async src="script2.js"></script>

Частые ошибки

• Использование async для скриптов, которые зависят от DOM или других скриптов. Это может привести к ошибкам, если скрипт выполнится до того, как DOM будет готов или до загрузки зависимого скрипта.
• Непонимание разницы между async и defer. Кандидаты часто путают эти атрибуты, что приводит к неправильному выбору в зависимости от сценария использования.

Связанные темы

• Атрибут defer и его отличие от async.
• События DOMContentLoaded и load, и как на них влияют async и defer.
• Оптимизация загрузки страницы и влияние скриптов на время рендеринга.

Follow-up вопросы

Чем отличается async от defer?

Уровень: basic

async загружает и выполняет скрипт асинхронно без сохранения порядка, defer тоже загружает асинхронно, но выполняет скрипты строго по порядку после парсинга DOM.

Когда стоит использовать async, а когда defer?

Уровень: intermediate

async — для независимых скриптов (аналитика, реклама), defer — когда важен порядок выполнения (библиотеки, плагины). async выполняется при готовности, defer — после DOMContentLoaded.

Как браузер обрабатывает несколько скриптов с async?

Уровень: basic

Браузер загружает их параллельно и выполняет сразу по готовности. Порядок выполнения не гарантируется — какой скрипт загрузится первым, тот и выполнится.

Может ли async скрипт блокировать рендеринг?

Уровень: intermediate

Нет, async не блокирует парсинг HTML. Но выполнение скрипта может временно заблокировать основной поток, если он содержит тяжелые синхронные операции.

Как async влияет на события DOMContentLoaded и load?

Уровень: advanced

DOMContentLoaded не ждет async скрипты, но событие load ожидает их завершения. Если async скрипт долго грузится, load сработает позже.