Comment fonctionne exactement <script defer = “defer”>?

J'ai quelques <script>éléments, et le code de certains d'entre eux dépend du code d'autres <script>éléments. J'ai vu que l' deferattribut peut être utile ici car il permet de retarder l'exécution des blocs de code.

Pour le tester, j'ai exécuté ceci sur Chrome: http://jsfiddle.net/xXZMN/ .

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

Cependant, il alerte 2 - 1 - 3. Pourquoi ne l'alerte- 1 - 2 - 3t- il pas ?

MISE À JOUR: 19/02/2016

Considérez cette réponse comme obsolète. Référez-vous à d'autres réponses sur ce post pour des informations pertinentes pour la nouvelle version du navigateur.

Fondamentalement, différer indique au navigateur d'attendre "jusqu'à ce qu'il soit prêt" avant d'exécuter le javascript dans ce bloc de script. Habituellement, c'est après que le DOM a fini de charger et de document.readyState == 4

L'attribut defer est spécifique à Internet Explorer. Dans Internet Explorer 8, sur Windows 7, le résultat que je vois dans votre page de test JS Fiddle est 1 - 2 - 3.

Les résultats peuvent varier d'un navigateur à l'autre.

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

Contrairement à la croyance populaire, IE suit les normes plus souvent que les gens ne le disent, en réalité l'attribut "defer" est défini dans la spécification DOM niveau 1 http://www.w3.org/TR/REC-DOM-Level-1/level -one-html.html

La définition du W3C de différer: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

"Lorsqu'il est défini, cet attribut booléen indique à l'agent utilisateur que le script ne va pas générer de contenu de document (par exemple, pas de" document.write "en javascript) et ainsi, l'agent utilisateur peut continuer l'analyse et le rendu."

Quelques extraits de la spécification HTML5: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

Les attributs defer et async ne doivent pas être spécifiés si l'attribut src n'est pas présent.

Il existe trois modes possibles qui peuvent être sélectionnés à l'aide de ces attributs [async et différé]. Si l'attribut async est présent, le script sera exécuté de manière asynchrone, dès qu'il sera disponible. Si l'attribut async n'est pas présent mais que l'attribut defer est présent, le script est exécuté lorsque la page a terminé l'analyse. Si aucun attribut n'est présent, le script est récupéré et exécuté immédiatement, avant que l'agent utilisateur continue d'analyser la page.

Les détails exacts du traitement de ces attributs sont, pour des raisons principalement historiques, quelque peu non triviaux, impliquant un certain nombre d'aspects du HTML. Les exigences de mise en œuvre sont donc nécessairement dispersées dans la spécification. Les algorithmes ci-dessous (dans cette section) décrivent le cœur de ce traitement, mais ces algorithmes font référence et sont référencés par les règles d'analyse des balises de début et de fin de script en HTML, en contenu étranger et en XML, les règles du document.write () méthode, le traitement des scripts, etc.

Si l'élément a un attribut src, et l'élément a un attribut defer, et l'élément a été marqué comme "inséré par l'analyseur", et l'élément n'a pas d'attribut async:

L'élément doit être ajouté à la fin de la liste des scripts qui s'exécuteront lorsque le document aura terminé l'analyse associée au document de l'analyseur qui a créé l'élément.

La vraie réponse est: parce que vous ne pouvez pas faire confiance à différer.

Dans le concept, différer et asynchroniser diffèrent comme suit:

async permet de télécharger le script en arrière-plan sans le bloquer. Ensuite, au moment où il termine le téléchargement, le rendu est bloqué et ce script s'exécute. Le rendu reprend une fois le script exécuté.

reporter fait la même chose, sauf qu'il prétend garantir que les scripts s'exécutent dans l'ordre où ils ont été spécifiés sur la page, et qu'ils seront exécutés une fois l'analyse du document terminée. Ainsi, certains scripts peuvent terminer le téléchargement puis s'asseoir et attendre les scripts téléchargés plus tard mais apparus devant eux.

Malheureusement, en raison de ce qui est vraiment un combat de chats standard, la définition de defer varie selon les spécifications, et même dans les spécifications les plus récentes, n'offre pas de garantie utile. Comme les réponses ici et ce problème le démontrent, les navigateurs implémentent différer différemment:

• Dans certaines situations, certains navigateurs ont un bogue qui provoque le deferdysfonctionnement des scripts.
• Certains navigateurs retardent l' DOMContentLoadedévénement jusqu'à ce que les deferscripts soient chargés, et d'autres non.
• Certains navigateurs obéissent deferà des <script>éléments avec du code en ligne et sans srcattribut, et certains l'ignorent.

Heureusement, la spécification spécifie au moins que les substitutions asynchrones reportent. Ainsi, vous pouvez traiter tous les scripts comme asynchrones et obtenir une large gamme de support de navigateur comme ceci:

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

98% des navigateurs utilisés dans le monde et 99% aux États-Unis éviteront le blocage avec cette approche.

(Si vous devez attendre la fin de l'analyse du document, écoutez l'événement d' DOMContentLoadedévénement ou utilisez la .ready()fonction pratique de jQuery . Vous voudrez quand même le faire pour vous rabattre gracieusement sur les navigateurs qui ne l'implémentent pas deferdu tout.)

deferne peut être utilisé que dans la <script>balise pour l' inclusion de script externe . Par conséquent, il est conseillé de l'utiliser dans les <script>balises-de la section <head>.

Comme l'attribut defer ne fonctionne qu'avec la balise scripts avec src. Trouvé un moyen d'imiter le report des scripts en ligne. Utilisez l'événement DOMContentLoaded.

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

En effet, l'événement DOMContentLoaded se déclenche après le chargement complet des scripts attribués différés.

L'attribut defer est uniquement pour les scripts externes (ne doit être utilisé que si l'attribut src est présent).

Il convient également de noter qu'il peut y avoir des problèmes dans IE <= 9 lors de l'utilisation script deferdans certaines situations. Plus d'informations à ce sujet: https://github.com/h5bp/lazyweb-requests/issues/42

Jetez un œil à cet excellent article Plongez dans les eaux troubles du chargement de scripts par le développeur Google Jake Archibald écrit en 2013.

Citant la section pertinente de cet article:

Reporter

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

Spec dit : Téléchargez ensemble, exécutez dans l'ordre juste avant DOMContentLoaded. Ignorez «reporter» sur les scripts sans «src».

IE <10 dit : je pourrais exécuter 2.js à mi-chemin de l'exécution de 1.js. N'est-ce pas amusant ??

Les navigateurs en rouge disent : Je n'ai aucune idée de ce qu'est ce "report", je vais charger les scripts comme s'ils n'étaient pas là.

D'autres navigateurs disent : Ok, mais je ne pourrais pas ignorer «différer» les scripts sans «src».

_{(J'ajouterai que les premières versions de Firefox déclenchent DOMContentLoaded avant la deferfin des scripts, selon ce commentaire .)}

Les navigateurs modernes semblent prendre en charge asynccorrectement, mais vous devez être d'accord avec les scripts en panne et éventuellement avant DOMContentLoaded.

Cet attribut booléen est défini pour indiquer à un navigateur que le script est destiné à être exécuté après l'analyse du document. Étant donné que cette fonctionnalité n'a pas encore été implémentée par tous les autres principaux navigateurs, les auteurs ne doivent pas supposer que l'exécution du script sera réellement différée. N'appelez jamais document.write () à partir d'un script différé (depuis Gecko 1.9.2, cela détruirait le document). L'attribut defer ne doit pas être utilisé sur des scripts qui n'ont pas l'attribut src. Depuis Gecko 1.9.2, l'attribut defer est ignoré sur les scripts qui n'ont pas l'attribut src. Cependant, dans Gecko 1.9.1, même les scripts en ligne sont différés si l'attribut defer est défini.

defer fonctionne avec Chrome, Firefox, c'est-à-dire> 7 et Safari

réf: https://developer.mozilla.org/en-US/docs/HTML/Element/script

L'attribut defer est un attribut booléen.

Lorsqu'il est présent, il spécifie que le script est exécuté lorsque la page a terminé l'analyse.

Remarque: L'attribut defer est uniquement pour les scripts externes (ne doit être utilisé que si l'attribut src est présent).

Remarque: Il existe plusieurs façons d'exécuter un script externe:

Si async est présent: le script est exécuté de manière asynchrone avec le reste de la page (le script sera exécuté pendant que la page continue l'analyse) Si async n'est pas présent et différé est présent: Le script est exécuté lorsque la page a terminé l'analyse Si ni async ni report n'est présent: le script est récupéré et exécuté immédiatement, avant que le navigateur ne continue d'analyser la page