> Выполняются ли скрипты в порядке перечисления в документе и работает ли это с async (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Сбер

Стек: JavaScript

> Пример ответа

Короткий ответ

По умолчанию скрипты выполняются в порядке их появления в документе, так как браузер блокирует парсинг HTML при загрузке и выполнении синхронного <script>. Атрибут async нарушает этот порядок: скрипт выполняется сразу после загрузки, независимо от других скриптов. defer сохраняет порядок, но откладывает выполнение до завершения парсинга документа.

Подробное объяснение

Синхронные скрипты без атрибутов выполняются строго последовательно в порядке их появления в HTML. Браузер останавливает парсинг DOM, загружает скрипт (если он внешний), выполняет его, и только затем продолжает разбор документа. Это гарантирует порядок, но замедляет загрузку страницы.

Атрибут async предназначен для независимых скриптов. Он загружает скрипт асинхронно, не блокируя парсинг, и выполняет его сразу после завершения загрузки, в любой момент. Порядок выполнения не гарантируется: если два async-скрипта ссылаются на один ресурс, тот, что загрузится быстрее, выполнится первым, независимо от положения в HTML.

defer также загружается асинхронно, но выполняется только после полного парсинга документа, перед событием DOMContentLoaded. При этом сохраняется порядок объявления - все defer-скрипты выполняются в том же порядке, что и в HTML.

Важно: async и defer работают только для внешних скриптов с атрибутом src. Для inline-скриптов эти атрибуты игнорируются.

На практике

Для скриптов, которые зависят от DOM или друг от друга, используйте defer - это безопасно и сохраняет порядок. Для аналитики, счётчиков или других независимых скриптов, которые не должны блокировать загрузку страницы, подходит async. Синхронные скрипты без атрибутов стоит размещать в конце <body>, чтобы минимизировать блокировку рендеринга.

Пример кода

HTML
<!-- Синхронный - блокирует парсинг, выполняется сразу -->
<script src="script1.js"></script>

<!-- async - загружается параллельно, выполняется когда готов -->
<script src="analytics.js" async></script>

<!-- defer - загружается параллельно, выполняется после парсинга DOM -->
<script src="app.js" defer></script>
<script src="utils.js" defer></script>
<!-- app.js выполнится до utils.js, хотя порядок загрузки может быть любым -->

Как отвечать на собеседовании

Начни с чёткого утверждения: да, синхронные скрипты выполняются по порядку. Затем объясни, как async нарушает этот порядок, а defer сохраняет его, но откладывает выполнение. Приведи примеры использования: defer для скриптов, которым нужен DOM, async для независимых. Упомяни, что async и defer игнорируются для inline-скриптов. Если спросят про динамически создаваемые скрипты, добавь, что по умолчанию они ведут себя как async.

Что проверяет интервьюер

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

Типичные ошибки

Путать async и defer: думать, что async сохраняет порядок, а defer - нет.
Считать, что async и defer работают для inline-скриптов.
Не учитывать, что defer-скрипты выполняются до DOMContentLoaded, а не после.
Думать, что async-скрипты всегда выполняются после полной загрузки страницы - на самом деле они могут выполниться в любой момент, даже до завершения парсинга.