Чем отличаются атрибуты async и defer у тега script?
- Где подключать скрипты на странице?
Обычный <script> останавливает разбор HTML до загрузки и выполнения. defer — загрузка параллельно, выполнение после разбора HTML, по порядку подключения. async — загрузка параллельно, выполнение сразу по готовности, в произвольном порядке.
- defer — для скриптов приложения, зависящих от DOM и друг от друга
- async — для независимых (аналитика, реклама)
- type="module" по умолчанию ведёт себя как defer
А ещё Скрипты в конце body — старый способ добиться того же
Подробно
| загрузка | выполнение | порядок | |
|---|---|---|---|
| без атрибута | блокирует парсер | сразу | по порядку |
| defer | параллельно | после разбора, до DOMContentLoaded | по порядку |
| async | параллельно | как загрузится, прерывая разбор | любой |
Почему это важно. Синхронный скрипт в head задерживает первую отрисовку на время сетевого запроса. defer позволяет браузеру продолжать строить DOM.
Модули (type="module") отложены по умолчанию, поддерживают import; с async выполняются по готовности.
Связанные приёмы: <link rel="preload"> для критичных ресурсов, preconnect к сторонним доменам, разделение бандла на части и ленивая загрузка через import().
Что хотят услышать
- Поведение трёх вариантов.
- Когда что использовать.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗defer выполняет скрипт сразу после загрузки, в любом порядке, не дожидаясь HTML
- ✓defer — после разбора HTML и по порядку; async — сразу по готовности, в любом порядке
- ✗async гарантирует порядок выполнения скриптов
- ✗Обычный script не влияет на разбор HTML
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.