\n\n\n```\n\nМодули (`type=\"module\"`) по умолчанию ведут себя похоже на `defer` и поддерживают `async`.\n\n## Как думает сеньор\n\nКритичный код в `` без `defer`/`async` убивает FCP. Аналитику часто ставят `async`; приложение — `defer` или module. Порядок зависимостей важнее «скорости любой ценой».\n\n## Итог\n\nБлокирующий script — синхронно; `async` — «как приехал»; `defer` — «после HTML, по порядку»."}}}

Чем отличаются обычный `<script>`, `<script async>` и `<script defer>`?

JavaScript · junior · сложность 4

Войти, чтобы отмечать

В чём суть

Все три подключают JS, но по-разному влияют на парсинг HTML и момент выполнения.

Поведение

Обычный <script> — парсинг HTML блокируется на загрузку и выполнение скрипта.
async — файл качается параллельно с парсингом; выполняется сразу, как готов, порядок нескольких async не гарантирован.
defer — тоже качается параллельно, но выполняется после разбора HTML, в порядке появления в разметке.

<script src="a.js"></script>
<script async src="analytics.js"></script>
<script defer src="app.js"></script>

Модули (type="module") по умолчанию ведут себя похоже на defer и поддерживают async.

Как думает сеньор

Критичный код в <head> без defer/async убивает FCP. Аналитику часто ставят async; приложение — defer или module. Порядок зависимостей важнее «скорости любой ценой».

Итог

Блокирующий script — синхронно; async — «как приехал»; defer — «после HTML, по порядку».

Загрузка…