Атрибут defer тега <script>

Описание

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

Пример использования:
<script defer src="app.js"></script>

Ключевые особенности:

Характеристика Описание
Порядок выполнения Скрипты выполняются в порядке их объявления в документе
Время выполнения После парсинга HTML, до DOMContentLoaded
Блокировка рендеринга Не блокирует парсинг и отображение страницы

Сравнение с async:

<!-- Defer - сохраняет порядок выполнения --> <script defer src="script1.js"></script> <script defer src="script2.js"></script> <!-- Async - выполняется при загрузке, порядок не гарантирован --> <script async src="script3.js"></script> <script async src="script4.js"></script>

Рекомендации по использованию:

  • Используйте для скриптов, зависящих от DOM
  • Подходит для скриптов, зависящих друг от друга
  • Оптимален для большинства скриптов, модифицирующих страницу
  • Не требует обертки в DOMContentLoaded

Ограничения:

  • Не поддерживается в IE9 и ниже
  • Не влияет на встроенные скрипты (без src)
  • Не должен использоваться для критически важного рендеринга

Примечание: Атрибут defer идеально подходит для скриптов, которым требуется полный DOM, но которые не являются критичными для первоначального отображения страницы.