Как именно работает <script defer = «defer»>?

У меня есть несколько <script>элементов, и код в некоторых из них зависит от кода в других <script>элементах. Я видел, что deferатрибут может пригодиться здесь, поскольку он позволяет откладывать блоки кода в процессе выполнения.

Чтобы проверить это, я выполнил это на Chrome: http://jsfiddle.net/xXZMN/ .

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

Тем не менее, это предупреждает 2 - 1 - 3. Почему это не насторожило 1 - 2 - 3?

ОБНОВЛЕНО: 19.02.2016

Считайте этот ответ устаревшим. Обратитесь к другим ответам на этот пост для получения информации, относящейся к более новой версии браузера.

По сути, defer указывает браузеру подождать «пока он не будет готов», прежде чем выполнять javascript в этом блоке сценария. Обычно это происходит после завершения загрузки DOM и document.readyState == 4

Атрибут defer относится только к Internet Explorer. В Internet Explorer 8 в Windows 7 результат, который я вижу на вашей тестовой странице JS Fiddle, 1 - 2 - 3.

Результаты могут отличаться от браузера к браузеру.

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

Вопреки распространенному мнению, IE следует стандартам чаще, чем люди допускают, в действительности атрибут defer определен в спецификации DOM Level 1 http://www.w3.org/TR/REC-DOM-Level-1/level -он-html.html

Определение отсрочки в W3C: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

«Когда этот атрибут установлен, этот логический атрибут подсказывает агенту пользователя, что сценарий не будет генерировать никакого содержимого документа (например, нет« document.write »в javascript), и, таким образом, агент пользователя может продолжить анализ и рендеринг».

Несколько фрагментов из спецификации HTML5: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

Атрибуты defer и async не должны указываться, если атрибут src отсутствует.

Есть три возможных режима, которые можно выбрать с помощью этих атрибутов [async и defer]. Если атрибут async присутствует, сценарий будет выполняться асинхронно, как только он станет доступен. Если атрибут async отсутствует, но присутствует атрибут defer, тогда скрипт выполняется после завершения анализа страницы. Если ни один из атрибутов не присутствует, сценарий извлекается и выполняется немедленно, прежде чем пользовательский агент продолжит анализ страницы.

Точные детали обработки для этих атрибутов, по большей части историческим причинам, несколько нетривиальны, включая ряд аспектов HTML. Поэтому требования к реализации по необходимости разбросаны по всей спецификации. Приведенные ниже алгоритмы (в этом разделе) описывают суть этой обработки, но на эти алгоритмы ссылаются и ссылаются правила синтаксического анализа для начальных и конечных тегов сценариев в HTML, во внешнем контенте и в XML - правилах для document.write. () метод, обработка сценариев и т. д.

Если элемент имеет атрибут src, а элемент имеет атрибут defer, и элемент помечен как «вставленный синтаксический анализатор», а элемент не имеет асинхронного атрибута:

Элемент должен быть добавлен в конец списка сценариев, которые будут выполняться после завершения анализа документа, связанного с документом синтаксического анализатора, создавшего элемент.

Реальный ответ: потому что вы не можете доверять отсрочке.

Концептуально, defer и async отличаются следующим образом:

асинхронной позволяет загружать скрипт в фоновом режиме без блокировки. Затем, в момент завершения загрузки, рендеринг блокируется, и этот скрипт выполняется. Визуализация возобновляется после выполнения сценария.

defer делает то же самое, за исключением утверждений, гарантирующих, что сценарии выполняются в том порядке, в котором они были указаны на странице, и что они будут выполняться после завершения анализа документа. Таким образом, некоторые сценарии могут закончить загрузку, а затем сидеть и ждать сценариев, которые загружались позже, но появлялись перед ними.

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

• В некоторых ситуациях в некоторых браузерах есть ошибка, из-за которой deferскрипты работают не по порядку.
• Некоторые браузеры задерживают DOMContentLoadedсобытие до тех пор, пока deferскрипты не загрузятся, а некоторые - нет.
• Некоторые браузеры подчиняются deferна <script>элементах с инлайн кодом и без srcатрибута, и некоторые его игнорировать.

К счастью, в спецификации, по крайней мере, указано, что асинхронные переопределения отложены. Таким образом, вы можете рассматривать все сценарии как асинхронные и получать широкую поддержку браузеров следующим образом:

<script defer async src="..."></script>

При таком подходе 98% браузеров, используемых по всему миру, и 99% в США избежат блокировки.

(Если вам нужно подождать, пока документ не завершит синтаксический анализ, прослушайте событие DOMContentLoadedсобытия или воспользуйтесь удобной .ready()функцией jQuery. В любом случае вы захотите сделать это, чтобы элегантно использовать браузеры, которые вообще не реализуются defer.)

deferможет использоваться только в <script>теге для включения внешнего скрипта . Следовательно, рекомендуется использовать в <script>-tags в <head>-section.

Атрибут defer работает только с тегами scripts с src. Нашел способ подражать defer для встроенных скриптов. Используйте событие DOMContentLoaded.

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>

Это связано с тем, что событие DOMContentLoaded возникает после полной загрузки отложенных сценариев.

Атрибут defer предназначен только для внешних сценариев (должен использоваться только при наличии атрибута src).

Следует также отметить, что могут быть проблемы в IE <= 9 при использовании script deferв определенных ситуациях. Подробнее об этом: https://github.com/h5bp/lazyweb-requests/issues/42

Взгляните на эту прекрасную статью « Глубокое погружение в мутные воды загрузки скриптов », разработанную разработчиком Google Джейком Арчибальдом, написанную в 2013 году.

Цитирую соответствующий раздел из этой статьи:

Перенести

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>

Spec говорит : скачать вместе, выполнить по порядку перед DOMContentLoaded. Игнорируйте «defer» в сценариях без «src».

IE <10 говорит : я мог бы выполнить 2.js в середине выполнения 1.js. Разве это не весело?

Браузеры в красном говорят : я понятия не имею, что это за «отсрочка», я собираюсь загрузить скрипты, как будто их там не было.

Другие браузеры говорят : хорошо, но я не могу игнорировать «defer» в сценариях без «src».

_{(Я добавлю, что ранние версии Firefox вызывают DOMContentLoaded до завершения работы deferсценариев, согласно этому комментарию .)}

Современные браузеры, кажется, поддерживают asyncдолжным образом, но вы должны быть в порядке со сценариями, работающими не по порядку и, возможно, до DOMContentLoaded.

Этот логический атрибут устанавливается для указания браузеру, что сценарий должен выполняться после анализа документа. Поскольку эта функция еще не была реализована во всех других основных браузерах, авторы не должны предполагать, что выполнение сценария будет фактически отложено. Никогда не вызывайте document.write () из отложенного скрипта (начиная с Gecko 1.9.2, это уничтожит документ). Атрибут defer не должен использоваться в сценариях, которые не имеют атрибута src. Начиная с Gecko 1.9.2, атрибут defer игнорируется в сценариях, которые не имеют атрибута src. Однако в Gecko 1.9.1 даже встроенные скрипты откладываются, если установлен атрибут defer.

defer работает с Chrome, Firefox, т.е.> 7 и Safari

ссылка: https://developer.mozilla.org/en-US/docs/HTML/Element/script

Атрибут defer является логическим атрибутом.

Когда он присутствует, он указывает, что скрипт выполняется, когда страница закончила анализ.

Примечание. Атрибут defer предназначен только для внешних сценариев (должен использоваться только при наличии атрибута src).

Примечание. Существует несколько способов выполнения внешнего скрипта:

Если присутствует асинхронность: сценарий выполняется асинхронно с остальной частью страницы (сценарий будет выполняться, пока страница продолжит синтаксический анализ) Если асинхронность отсутствует и присутствует отсрочка: сценарий выполняется после завершения анализа страницы. нет ни асинхронного, ни отложенного: скрипт извлекается и выполняется немедленно, прежде чем браузер продолжит анализ страницы