Quels navigateurs prennent en charge <script async = “async” />?

196

Le 1er décembre 2009, Google a annoncé la prise en charge du suivi asynchrone de Google Analytics .

Le suivi asynchrone est réalisé à l'aide de la directive async pour la <script>balise.

Quels navigateurs prennent en charge la directive async ( <script async="async" />) et depuis quelle version?

javascript html performance asynchronous google-analytics knorv
la source
1
C'est juste sur cette page que vous avez liée: "Firefox 3.6 est le premier navigateur à offrir officiellement le support de cette nouvelle fonctionnalité" FWIW c'est une fonctionnalité HTML5, qui gagne rapidement en support de mieux en mieux.
Crescent Fresh
51
La spécification HTML5 indique que async = "true" est illégal. En tant qu'attribut HTML booléen, la présence de l'attribut indique "vrai", tandis que l'absence de l'attribut est égale à "faux". Si l'attribut est présent, les seules valeurs valides pour l'attribut sont "" et "async".
Joel Mueller
Voici un test en direct de cet attribut html5demo.braincracking.org/demo/async.php .
3
Cela devrait être un signet à vérifier fréquemment pour toute personne intéressée par ce problème: en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
pumpkinthehead

Réponses:

162

La prise en charge asynchrone spécifiée par google est obtenue en utilisant deux parties:

  • en utilisant un script sur votre page (le script est fourni par Google) pour écrire une balise <script> dans le DOM.

  • ce script a l'attribut async = "true" pour signaler aux navigateurs compatibles qu'il peut continuer à afficher la page.

La première partie fonctionne sur les navigateurs sans prise en charge de <script async.. balises, leur permettant de charger async avec un "hack" (bien que assez solide), et permet également de rendre la page sans attendre que ga.js soit récupéré.

La deuxième partie n'affecte que les navigateurs compatibles qui comprennent l' attribut html asynchrone

  • FF 3,6+
  • FF pour Android Toutes les versions
  • IE 10+ (à partir de l'aperçu 2)
  • Chrome 8+
  • Chrome pour Android Toutes les versions
  • Safari 5.0+
  • iOS Safari 5.0+
  • Navigateur Android 3.0+ (nid d'abeille sur)
  • Opera 15.0+
  • Opera Mobile 16.0+
  • Opera Mini Aucun (à partir de la version 8.0)

La façon "html5 appropriée" de spécifier async est avec a <script async src="...", not <script async="true". Cependant, au départ, les navigateurs ne prenaient pas en charge cette syntaxe, ni la définition de la propriété de script sur les éléments référencés. Si vous le souhaitez, la liste change:

  • FF 4+
  • IE 10+ (aperçu 2 et supérieur)
  • Chrome 12+
  • Chrome pour Android 32+
  • Safari 5.1+
  • Pas de versions Android
Philip Rieck
la source
34
Je ne suis pas sûr que vous ayez même besoin de async = "true", vous pouvez simplement écrire "async"
vsync
4
donc si je génère la balise de script comme google le fait - ce qui serait correct: var s = document.createElement ('script'); s.async = 'true'; s.async = true; (google le fait de cette façon) ou s.async = 'async'; ?
Toby
8
@Tobias: vous mélangez les attributs booléens HTML et les propriétés d'élément DOM correspondantes: l'attribut HTML (présent dans le balisage et lors de la définition explicite d'attributs à l'aide setAttribute, ce qui n'est pas recommandé) doit simplement être présent ou être défini sur une chaîne vide ou lui-même ( defer="defer", particulièrement important lors de l'écriture de documents conformes XHTML); lors de la définition de la propriété de l'élément à la volée à l'aide de JavaScript, il faut utiliser s.async = true.
Marcel Korpel
39
@vsync: Cela ne devrait même pas l'être true; soit async, async=""soit async="async".
Marcel Korpel
4
Veuillez noter que le message lié dans les ensembles de questions async="true". Ce n'est pas la bonne façon de le faire maintenant , mais c'était la seule façon largement prise en charge à l' époque . Par exemple, IE10p2 est pris en charge async="true"mais ne prend pas en chargeasync="async"
Philip Rieck
60

Cette question comporte en réalité deux parties.

  1. Q: Quels navigateurs prennent en charge l'attribut "async" sur une balise de script dans le balisage?

    R: IE10p2 +, Chrome 11+, Safari 5+, Firefox 3.6+

  2. Q: Quels navigateurs prennent en charge la nouvelle spécification qui définit le comportement de la propriété "async" en JavaScript, sur un élément de script créé dynamiquement?

    R: IE10p2 +, Chrome 12+, Safari 5.1+, Firefox 4+

Quant à Opera, ils sont sur le point de sortir une version qui supportera les deux types d'async. J'ai travaillé en étroite collaboration avec eux à ce sujet, et cela devrait bientôt sortir (j'espère!).

Plus d'informations sur l'async ordonné (alias "async = false") peuvent être trouvées ici: http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order

De plus, pour tester si un navigateur prend en charge le nouveau comportement de la propriété asynchrone dynamique: http://test.getify.com/test-async/

Kyle Simpson
la source
25

Une liste complète des versions de navigateur prenant en charge le asyncparamètre est disponible ici

JeremiahLee
la source
10

Depuis votre page référencée:

http://googlecode.blogspot.com/2009/12/google-analytics-launches-asynchronous.html

Firefox 3.6 est le premier navigateur à offrir officiellement la prise en charge de cette nouvelle fonctionnalité. Si vous êtes curieux, voici plus de détails sur la spécification officielle asynchrone HTML5 .

tvanfosson
la source
"cette nouvelle fonctionnalité" fait référence à l'attribut asynchrone HTML5. L'extrait asynchrone de Google Analytics est pris en charge par tous les navigateurs.
Brian
1

Le asyncest actuellement pris en charge par toutes les dernières versions des principaux navigateurs. Il est pris en charge depuis quelques années sur la plupart des navigateurs.

Vous pouvez suivre les navigateurs qui prennent en charge l'async (et diffèrent) sur le site Web de MDN ici:
https://developer.mozilla.org/en-US/docs/HTML/Element/script

brunoais
la source
Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien de référence. Les réponses de lien uniquement peuvent devenir invalides si la page liée change. - De l'avis
Michael Gaskill
@MichaelGaskill Est-ce suffisant? Voulez-vous que je fasse un lien vers la réponse de Philip?
brunoais
0

Je viens de jeter un œil au DOM (document.scripts [1] .attributes) de cette page qui utilise google analytics. Je peux vous dire que Google utilise async = "".

[type="text/javascript", async="", src="http://www.google-analytics.com/ga.js"]
jeekajoo
la source