Welche Browser unterstützen <script async = “async” />?

196

Am 1. Dezember 2009 kündigte Google die Unterstützung für asynchrones Google Analytics-Tracking an .

Die asynchrone Verfolgung wird mithilfe der asynchronen Anweisung für das <script>Tag erreicht.

Welche Browser unterstützen die asynchrone Direktive ( <script async="async" />) und seit welcher Version?

javascript html performance asynchronous google-analytics knorv
quelle
1
Es befindet sich direkt auf der Seite, auf die Sie verlinkt haben: "Firefox 3.6 ist der erste Browser, der offiziell Unterstützung für diese neue Funktion anbietet." FWIW ist eine HTML5-Funktion, die schnell immer bessere Unterstützung erhält.
Crescent Fresh
51
Die HTML5-Spezifikation besagt, dass async = "true" illegal ist. Als boolesches HTML-Attribut gibt das Vorhandensein des Attributs "true" an, während das Fehlen des Attributs "false" entspricht. Wenn das Attribut vorhanden ist, sind die einzigen gültigen Werte für das Attribut "" und "asynchron".
Joel Mueller
Hier ist ein Live-Test dieses Attributs html5demo.braincracking.org/demo/async.php .
3
Dies sollte ein Lesezeichen sein, das regelmäßig für alle Interessenten an diesem Problem überprüft werden sollte: en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
pumpkinthehead

Antworten:

162

Die von Google angegebene asynchrone Unterstützung wird aus zwei Teilen erreicht:

  • Verwenden Sie das Skript auf Ihrer Seite (das Skript wird von Google bereitgestellt), um ein <script> -Tag in das DOM zu schreiben.

  • Dieses Skript hat das Attribut async = "true", um kompatiblen Browsern zu signalisieren, dass es die Seite weiter rendern kann.

Der erste Teil funktioniert mit Browsern ohne Unterstützung für <script async..Tags, sodass diese asynchron mit einem "Hack" geladen werden können (obwohl dies ein ziemlich solider ist) und die Seite gerendert werden kann, ohne darauf zu warten, dass ga.js abgerufen wird.

Der zweite Teil betrifft nur kompatible Browser, die das asynchrone HTML-Attribut verstehen

  • FF 3.6+
  • FF für Android Alle Versionen
  • IE 10+ (beginnend mit Vorschau 2)
  • Chrome 8+
  • Chrome für Android Alle Versionen
  • Safari 5.0+
  • iOS Safari 5.0+
  • Android Browser 3.0+ (Wabe auf)
  • Opera 15.0+
  • Opera Mobile 16.0+
  • Opera Mini Keine (ab 8.0)

Die "richtige HTML5-Methode" zum Festlegen von Async ist a <script async src="...", nicht <script async="true". Anfangs unterstützten Browser diese Syntax jedoch nicht und auch nicht das Festlegen der Skripteigenschaft für referenzierte Elemente. Wenn Sie dies möchten, ändert sich die Liste:

  • FF 4+
  • IE 10+ (Vorschau 2 und höher)
  • Chrome 12+
  • Chrome für Android 32+
  • Safari 5.1+
  • Keine Android-Versionen
Philip Rieck
quelle
34
Ich bin mir nicht sicher, ob du überhaupt async = "true" brauchst. Du kannst einfach 'async' schreiben
vsync
4
Wenn ich also das Skript-Tag wie Google generiere, was wäre dann richtig: var s = document.createElement ('script'); s.async = 'true'; s.async = true; (Google macht es so) oder s.async = 'async'; ?
Toby
8
@Tobias: Sie vermischen boolesche HTML-Attribute und die entsprechenden DOM-Elementeigenschaften: Das HTML-Attribut (im Markup vorhanden und beim expliziten Festlegen von Attributen mit setAttribute, was nicht empfohlen wird) sollte nur vorhanden sein oder entweder auf eine leere Zeichenfolge oder auf sich selbst festgelegt werden ( defer="defer"besonders wichtig beim Schreiben von XHTML-kompatiblen Dokumenten); Wenn Sie die Eigenschaft des Elements im laufenden Betrieb mit JavaScript festlegen, sollten Sie Folgendes verwenden s.async = true.
Marcel Korpel
39
@vsync: Es sollte nicht einmal sein true; entweder async, async=""oder async="async".
Marcel Korpel
4
Bitte beachten Sie, dass der in den Fragensätzen verlinkte Beitrag async="true". Es ist nicht der richtige Weg, es jetzt zu tun , aber es war der einzige weithin unterstützte Weg, es damals zu tun . Zum Beispiel IE10p2 unterstützt async="true", aber nicht unterstütztasync="async"
Philip Rieck
60

Diese Frage besteht eigentlich aus zwei Teilen.

  1. F: Welche Browser unterstützen das Attribut "async" für ein Skript-Tag im Markup?

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

  2. F: Welche Browser unterstützen die neue Spezifikation, die das Verhalten der Eigenschaft "async" in JavaScript für ein dynamisch erstelltes Skriptelement definiert ?

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

Opera steht kurz vor der Veröffentlichung einer Version, die beide Arten von Async unterstützt. Ich habe eng mit ihnen zusammengearbeitet, und es sollte bald herauskommen (ich hoffe!).

Weitere Informationen zu ordered-async (auch bekannt als "async = false") finden Sie hier: http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order

Um zu testen, ob ein Browser das neue Verhalten der dynamischen asynchronen Eigenschaften unterstützt: http://test.getify.com/test-async/

Kyle Simpson
quelle
25

Eine umfassende Liste der Browserversionen, die den asyncParameter unterstützen, finden Sie hier

JeremiahLee
quelle
10

Von Ihrer referenzierten Seite:

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

Firefox 3.6 ist der erste Browser, der offiziell Unterstützung für diese neue Funktion bietet. Wenn Sie neugierig sind, finden Sie hier weitere Details zur offiziellen asynchronen HTML5-Spezifikation .

Tvanfosson
quelle
"Diese neue Funktion" bezieht sich auf das asynchrone HTML5-Attribut. Das asynchrone Google Analytics-Snippet wird von allen Browsern unterstützt.
Brian
1

Das asyncwird derzeit von allen neuesten Versionen der wichtigsten Browser unterstützt. Es wird seit einigen Jahren in den meisten Browsern unterstützt.

Auf der MDN-Website können Sie nachverfolgen, welche Browser Async (und Defer) unterstützen:
https://developer.mozilla.org/en-US/docs/HTML/Element/script

Brunoais
quelle
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - Aus der Rezension
Michael Gaskill
@ MichaelGaskill Ist das genug? Soll ich auf Philipps Antwort verlinken?
Brunoais
0

Wir haben uns gerade das DOM (document.scripts [1] .attributes) dieser Seite angesehen, das Google Analytics verwendet. Ich kann Ihnen sagen, dass Google async = "" verwendet.

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