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

Что проверяют

Понимаете ли вы разницу между загрузкой и выполнением скрипта и как атрибуты меняют порядок. Следом обычно спрашивают про defer и type="module" или просят объяснить, почему плагин, подключённый с async, иногда падает с «jQuery is not defined».

Как отвечать

Обычные скрипты без атрибутов выполняются строго в порядке появления в документе. Загружать их браузер может параллельно: сканер предзагрузки находит src заранее. Но каждый такой скрипт останавливает парсинг HTML на время выполнения, а перед запуском ещё и ждёт уже подключённые стили.

С атрибутами картина другая:

• async: загрузка параллельно с парсингом, выполнение сразу по готовности. Порядок не гарантирован, скрипт может выполниться и до, и после DOMContentLoaded. Подходит для независимого кода: аналитика, счётчики;
• defer: загрузка параллельно, выполнение после разбора всего документа, но до DOMContentLoaded, строго в порядке следования;
• type="module": по умолчанию ведёт себя как defer. С async модуль выполнится, как только загрузятся он сам и всё, что он импортирует;
• динамические скрипты: элемент из document.createElement('script') по умолчанию асинхронный. Чтобы сохранить порядок вставки, ставят script.async = false.

Итого: с async порядок из разметки не соблюдается. Если скрипты зависят друг от друга, берите defer или модули с явными import, тогда зависимости разрешаются сами.

Где спотыкаются

Ставят async или defer на встроенный классический скрипт без src. Там атрибуты игнорируются, они работают только у внешних файлов, а у встроенного модуля смысл имеет лишь async.

Думают, что defer-скрипты выполняются после события load. Они отрабатывают раньше, до DOMContentLoaded, картинки к этому моменту могут ещё грузиться.

Утверждают, что без атрибутов браузер качает файлы строго по одному. Параллельная загрузка есть давно, последовательно только выполнение, а тормозит страницу именно блокировка парсера.