Як саме працює <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

Вважайте цю відповідь застарілою. Зверніться до інших відповідей у ​​цій публікації, щоб отримати інформацію стосовно нової версії браузера.

В основному, відкладати повідомляє браузеру почекати "до готовності", перш ніж виконати javascript у цьому блоці сценаріїв. Зазвичай це відбувається після того, як DOM закінчив завантаження і document.readyState == 4

Атрибут відстрочки специфічний для 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 дотримується стандартів частіше, ніж люди пускають, фактично атрибут "відкладати" визначається у специфікації DOM рівня 1 http://www.w3.org/TR/REC-DOM-Level-1/level -one-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

Атрибути відстрочки та асинхронізації не повинні бути вказані, якщо атрибут src відсутній.

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

Точні деталі обробки цих атрибутів, з більшості історичних причин, є дещо нетривіальними, включаючи ряд аспектів HTML. Таким чином, вимоги до впровадження по необхідності розкидані по всій специфікації. Алгоритми, наведені нижче (у цьому розділі), описують серцевину цієї обробки, але ці алгоритми посилаються та посилаються на правила розбору для початкових і кінцевих тегів сценарію в HTML, в іноземному вмісті та XML, правилах документа.write () метод, поводження з сценарієм тощо.

Якщо в елементі є атрибут src, а в елементі є атрибут defer, а елемент позначений як "вставлений парсер", а в елемента немає атрибута асинхронізації:

Елемент повинен бути доданий до кінця списку сценаріїв, який буде виконуватися після завершення розбору документа, пов'язаного з документом аналізатора, який створив елемент.

Справжня відповідь така: Тому що ви не можете довіряти відкладенню.

Поняття відкладення та асинхронізація відрізняються наступним чином:

async дозволяє завантажувати сценарій у фоновому режимі без блокування. Потім, коли закінчується завантаження, візуалізація блокується, і цей сценарій виконується. Візуалізація поновлюється після виконання сценарію.

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

На жаль, через те, що насправді є стандартом боротьби з котами, визначення відстрочки змінюється специфікацією до специфікації, і навіть в останніх специфікаціях не дає корисної гарантії. Як показують відповіді тут і це питання , браузери реалізують відкладати інакше:

• У певних ситуаціях у деяких браузерах є помилка, яка спричиняє deferневдачу сценаріїв.
• Деякі браузери затримують DOMContentLoadedподію до моменту завантаження deferсценаріїв, а деякі не.
• Деякі браузери підкоряються deferна <script>елементах з інлайн кодом і без srcатрибута, і деякі його ігнорувати.

На щастя, специфікація принаймні вказує, що асинхронізація перевизначає відкладати. Таким чином, ви можете ставитися до всіх сценаріїв як до асинхронізованих та отримувати широкий спектр підтримки браузера так:

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

98% браузерів, які використовуються у всьому світі та 99% у США, уникатимуть блокування при такому підході.

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

deferможе використовуватися в <script>тегу лише для включення зовнішнього сценарію . Тому рекомендується використовувати в <script>-tags в <head>-сече-.

Оскільки атрибут defer працює лише з тегом скриптів з src. Знайшов спосіб імітувати відстрочку для вбудованих сценаріїв. Використовуйте подію 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/isissue/42

Подивіться на цю чудову статтю Глибоке занурення у мутні води завантаження скриптів розробником Google Джейком Арчібальдом, написане у 2013 році

Цитуючи відповідний розділ цієї статті:

Відкладіть

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

Spec каже : Завантажте разом, виконайте замовлення безпосередньо перед DOMContentLoaded. Ігноруйте "відкладати" сценарії без "src".

IE <10 говорить : я можу виконати 2.js на півдорозі виконання 1.js. Хіба це не весело ??

Червоні браузери кажуть : я поняття не маю, що це за «відстрочка», я буду завантажувати сценарії так, ніби його там не було.

Інші браузери кажуть : Гаразд, але я не можу ігнорувати "відкладати" сценарії без "src".

_{(Додаю, що ранні версії Firefox запускають DOMContentLoaded до того, як deferсценарії закінчаться, відповідно до цього коментаря .)}

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

Цей атрибут Boolean встановлений, щоб вказувати браузеру, що сценарій повинен бути виконаний після розбору документа. Оскільки ця функція ще не реалізована у всіх інших основних браузерах, автори не повинні вважати, що виконання сценарію насправді буде відкладено. Ніколи не дзвоніть document.write () зі сценарію відкладання (оскільки Gecko 1.9.2, це вимкне документ). Атрибут defer не повинен використовуватися для скриптів, у яких немає атрибута src. Оскільки Gecko 1.9.2, атрибут defer ігнорується у скриптах, у яких немає атрибуту src. Однак у Gecko 1.9.1 навіть вбудовані сценарії відкладаються, якщо встановлено атрибут defer.

defer працює з хромом, firefox, тобто> 7 та Safari

посилання: https://developer.mozilla.org/en-US/docs/HTML/Element/script

Атрибут defer - булевий атрибут.

При наявності він визначає, що сценарій виконується після того, як сторінка закінчила розбір.

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

Примітка. Існує кілька способів виконання зовнішнього скрипту:

Якщо присутній асинхронізація: Сценарій виконується асинхронно з рештою сторінки (сценарій буде виконуватися, поки сторінка продовжує розбір) Якщо асинхроніка відсутня і відкладено: Сценарій виконується, коли сторінка закінчила розбір Якщо ні асинхронізація, ні відстрочка: Сценарій дістається та виконується негайно, перш ніж браузер продовжить розбір сторінки