HTML Academy · Урок

Атрибуты async и defer

Загружайте скрипты, не блокируя разбор HTML

«Атрибуты async и defer» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Поведение обычного скрипта по умолчанию

Обычный <script src="..."> без async или defer блокирует разбор HTML на время загрузки и выполнения. Отрисовка всего, что находится ниже скрипта, приостанавливается, поэтому раньше скрипты традиционно размещали внизу <body>.

async загружает параллельно

<script async src="..."> загружает скрипт параллельно с разбором HTML и выполняет его сразу после загрузки. Выполнение по-прежнему приостанавливает разбор HTML, но лишь ненадолго — скрипт не блокирует загрузку других ресурсов.

Порядок выполнения async непредсказуем

Два скрипта с async выполняются в том порядке, в котором завершилась их загрузка. Никогда не используйте async для скриптов, зависящих друг от друга (jQuery должен загружаться до плагина jQuery), поскольку зависимый скрипт может выполниться до доступности необходимого компонента.

defer ожидает HTML

<script defer src="..."> загружается параллельно, как async, но выполняется только после полного разбора HTML — непосредственно перед событием DOMContentLoaded. Скрипт никогда не блокирует разбор.

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

defer сохраняет порядок

Несколько скриптов с defer выполняются в порядке их объявления, как обычные скрипты в конце body. Поэтому defer подходит для зависимых скриптов: вспомогательные компоненты загружаются до использующих их компонентов без ручной координации.

Выбор между async и defer

Используйте async для независимых фрагментов стороннего кода (аналитики, рекламы), которые не обращаются к DOM и не имеют зависимостей. Используйте defer для собственного кода приложения, которому нужен DOM и который зависит от других скриптов.

Для модулей по умолчанию используется defer

<script type="module"> автоматически ведёт себя как defer: загружается параллельно, выполняется после разбора и сохраняет порядок. Добавление defer к модулю допустимо, но избыточно; добавление async переключает его обратно на поведение async.

Встроенные скрипты игнорируют async и defer

async и defer применяются только к внешним скриптам с атрибутом src. Встроенный тег <script> выполняется сразу независимо от атрибутов, поэтому для <script>console.log(1)</script> эти атрибуты молча игнорируются.

Размещение становится менее важным

При использовании defer или модулей теги <script> можно размещать в <head> без блокировки разбора. Кроме того, это позволяет браузеру обнаружить их и начать загрузку раньше, чем при размещении внизу <body>.

<head>
  <script defer src="app.js"></script>
</head>

Сочетание с preload

Для скриптов, чувствительных к задержке, добавьте в head <link rel="preload" as="script" href="...">, а ниже разместите отложенный <script>. preload немедленно начинает загрузку, а defer гарантирует правильный порядок выполнения.

Распространённая ошибка

Пометка скрипта как async без проверки отсутствия всех зависимостей — самая частая причина состояний гонки «у меня работает, а в рабочей среде ломается». Если сомневаетесь, выбирайте defer: он гораздо терпимее, тогда как async может привести к серьёзным сбоям.

Проверка знаний

В чём разница между async и defer для двух скриптов, если второй зависит от первого?

Итоги

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

Часто задаваемые вопросы

Урок «Атрибуты async и defer» бесплатный?

Да — полный текст урока «Атрибуты async и defer» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Атрибуты async и defer»?

Загружайте скрипты, не блокируя разбор HTML Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Атрибуты async и defer»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy