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

Mise à JOUR: 2/19/2016

Considérer cette réponse obsolètes. Se référer à d'autres réponses sur ce post pour obtenir des renseignements pertinents à la plus récente version du navigateur.

---

Fondamentalement, reporter indique au navigateur d'attente "jusqu'à ce qu'il est prêt" avant d'exécuter le code javascript dans un bloc de script. Généralement c'est après 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 JS Fiddle page de test 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 des normes plus souvent que les gens laissent sur, en réalité, le "reporter" de l'attribut est défini dans le DOM Niveau 1 spec http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html

Le W3C définition de reporter: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer:

"Lorsqu'elle est réglée, cet attribut booléen indique à l'agent utilisateur que le script ne va pas générer de tout document contenu (par exemple, pas de "document.écrire" en javascript) et donc, l'agent utilisateur peut continuer d'analyse et de rendu."

La vraie réponse est: Parce que vous ne pouvez faire confiance à reporter.

Dans le concept, reporter et asynchrone se distinguent comme suit:

async permet le script pour être téléchargé en arrière-plan sans blocage. Puis, le moment de la fin de son téléchargement, le rendu est bloqué et que le script s'exécute. Rendre reprend lorsque le script est exécuté.

reporter fait la même chose, à l'exception des allégations de garantir que les scripts s'exécutent dans l'ordre qu'ils ont été spécifiés sur la page, et qu'ils seront exécutés après que le document a terminé l'analyse. Ainsi, certains de ces scripts peut terminer le téléchargement, puis s'asseoir et d'attendre pour les scripts téléchargés plus tard mais a comparu devant eux.

Malheureusement, en raison de ce qui est vraiment un combat de chat, de reporter à la définition varie spec spec, et même dans les plus récentes spécifications n'offre pas utile de garantie. En tant que réponses ici et ce problème démontrer, mettre en œuvre les navigateurs reporter différemment:

• Dans certaines situations, certains navigateurs ont un bug qui provoque defer l'exécution de scripts de commande.
• Certains navigateurs, le retard de la DOMContentLoaded, jusqu'à ce que après la defer scripts ont chargé, et certains ne le font pas.
• Certains navigateurs obéir defer sur <script> éléments avec le code en ligne et sans src attribut, et certains l'ignorer.

Heureusement, la spécification ne fait au moins préciser que async remplace reporter. Vous pouvez donc traiter tous les scripts que async et obtenir une large bande de support de navigateur comme suit:

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

98% des navigateurs utilisés dans le monde entier et 99% aux états-unis permet d'éviter le blocage avec cette approche.

(Si vous avez besoin d'attendre jusqu'à ce que le document a fini d'analyser, d'écouter l'événement DOMContentLoaded de l'événement ou de l'utilisation de jQuery pratique .ready() fonction. Vous voulez le faire de toute façon à retomber gracieusement sur les navigateurs n'implémentent pas defer à tous.)

Comme attribut defer fonctionne uniquement avec les scripts de la balise avec le src. Trouvé un moyen pour imiter reporter pour les scripts. L'utilisation de 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>

C'est parce que, DOMContentLoaded événement se déclenche après différer attribué scripts sont complètement chargées.

Convient également de noter qu'il pourrait y avoir des problèmes dans IE<=9 lors de l'utilisation de script defer dans certaines situations. En savoir plus sur cette: https://github.com/h5bp/lazyweb-requests/issues/42

Cet attribut Booléen est défini pour indiquer au navigateur que le script est destiné à être exécuté après que le document a été analysé. Depuis cette fonctionnalité n'a pas encore été mis en œuvre par tous les autres grands navigateurs, les auteurs ne devraient pas présumer que le script d'exécution du fait d'être reporté. Ne jamais appeler document.write() à partir d'un reporter de script (depuis Gecko 1.9.2, cela va souffler 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, le reporter de l'attribut est ignoré sur des scripts qui n'ont pas l'attribut src. Cependant, dans Gecko 1.9.1 même inline scripts sont reportés si l'attribut defer est réglé.

reporter fonctionne avec chrome , firefox , ie > 7 et Safari

ref: https://developer.mozilla.org/en-US/docs/HTML/Element/script