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

Значение и применение

Внешний обычный скрипт без async и defer приостанавливает разбор HTML на время загрузки и выполнения. Эти атрибуты позволяют загружать файл параллельно разбору документа.

Логический атрибут defer элемента <script> полезен, когда скрипту нужна готовая разметка: например, чтобы найти кнопку и назначить обработчик. Он действует на внешние обычные скрипты с src.

Скрипты с defer загружаются параллельно разбору HTML, а выполняются после его окончания, в порядке расположения элементов <script>. Браузер не обязан ждать загрузки первого файла, чтобы начать загрузку второго. Событие DOMContentLoaded ждёт выполнения этих скриптов; загрузку всех изображений они не ожидают.

На встроенный обычный скрипт без src атрибут не действует. Модульные скрипты (type="module") по умолчанию выполняются после разбора HTML и не нуждаются в defer.

Для готовности разметки и порядка выполнения обычных внешних скриптов выбирайте defer. Для независимого выполнения по готовности подходит async. При наличии обоих атрибутов действует async.

Сравните пример подключения двух файлов: в инструментах разработчика замедлите сеть или задержите запрос одного файла и сравните порядок сообщений в консоли.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьhtml.elements.script.defer
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
defer✓1

Версия 1 выпущена в 2008 г.

Примечание MDN (англ.)

Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml), see bug 41253514 and bug 41408348

✓12✓3.5

Версия 3.5 выпущена в 2009 г.

Примечание MDN (англ.)

Since Firefox 3.6, the defer attribute is ignored on scripts that don't have the src attribute. However, in Firefox 3.5 even inline scripts are deferred if the defer attribute is set.

✓15

Версия 15 выпущена в 2013 г.

Примечание MDN (англ.)

Opera does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml), see bug 41253514 and bug 41408348

✓3✓18

Версия 18 выпущена в 2012 г.

Примечание MDN (англ.)

Chrome Android does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml), see bug 41253514 and bug 41408348

✓4✓14

Версия 14 выпущена в 2013 г.

Примечание MDN (англ.)

Opera Android does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml), see bug 41253514 and bug 41408348

✓2✓1.0

Версия 1.0 выпущена в 2013 г.

Примечание MDN (англ.)

Samsung Browser does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml), see bug 41253514 and bug 41408348

✓4.4

Версия 4.4 выпущена в 2013 г.

Примечание MDN (англ.)

WebView Android does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml), see bug 41253514 and bug 41408348

✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис:

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

Значения атрибута

Значения defer
Значение Описание
defer Значение атрибута требуется только в XHTML (<script defer = "defer">).

Отличия HTML 4.01 от HTML 5

Нет.

Спецификация

HTML Living Standard.

Примеры, попробуйте сами

Атрибут defer элемента script

Нужны отдельный файл app.js и HTTP-сервер. Встроенный редактор не загружает внешние скрипты. Сравните порядок загрузки в отдельном документе.

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Подключение скрипта</title>
    <script defer src="app.js"></script>
  </head>
  <body>
    <h1>Моя страница</h1>
    <p>Содержимое документа.</p>
  </body>
</html>

Выполнение двух скриптов по порядку

Сохраните три файла рядом и откройте HTML через локальный HTTP-сервер. На вкладке «Сеть» инструментов разработчика включите замедление или задержите first.js и обновите страницу. При defer сообщения сохраняют порядок подключения; при async порядок не гарантирован. Встроенный редактор не выполняет этот сетевой сценарий.

Исходный код для изучения. Запуск на этой странице недоступен.

first.js
JavaScript
console.log('Первый', document.querySelector('h1') ? 'разметка готова' : 'разметки ещё нет')
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Выполнение двух скриптов по порядку</title>
    <script defer src="first.js"></script>
    <script defer src="second.js"></script>
  </head>
  <body>
    <h1>Порядок сообщений в консоли</h1>
    <script>
      // Событие показывает, когда закончился разбор HTML
      document.addEventListener('DOMContentLoaded', () => console.log('DOMContentLoaded'))
    </script>
  </body>
</html>
second.js
JavaScript
console.log('Второй')