Ist das Attribut/die Eigenschaft „async“ nützlich, wenn ein Skript dynamisch zum DOM hinzugefügt wird?

Question

Diese Frage ist irgendwie tangential zu Welche Browser unterstützen <script async="async" />?.

Ich habe in letzter Zeit einige Skripte gesehen, die etwa Folgendes tun:

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://www.example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(s);

Dies ist eine gängige Methode zum dynamischen Hinzufügen eines Skripts zum DOM. IIRC aus Steve Souders‘ Buch „Noch schnellere Websites,“ fordert alle modernen Browser auf, das Skript asynchron zu laden (d. h. das Rendern von Seiten oder das Herunterladen nachfolgender Assets wird nicht blockiert).

Wenn ich damit recht habe, ist das der Fall s.async = true Aussage hat irgendeinen Nutzen?Wäre es nicht überflüssig, selbst für die Browser, die diese Eigenschaft unterstützen, da das dynamisch angehängte Skript bereits einen asynchronen Download auslösen sollte?

Answer 1

Der Spezifikation (jetzt) ​​schreibt vor, dass a script Element, das ist nicht parser-inserted ist asynchron;Die async Die Eigenschaft ist für Nicht-Parser-Einfügungen irrelevant script Elemente:

Das dritte ist ein Flag, das angibt, ob das Element „Force-Async".Anfänglich, script Bei Elementen muss dieses Flag gesetzt sein.Es wird vom HTML-Parser und vom XML-Parser deaktiviert script Elemente, die sie einfügen.Darüber hinaus gilt immer dann, wenn ein Skriptelement, dessen „Force-Async„Flag ist gesetzt hat eine async Inhaltsattribut hinzugefügt, das Element „Force-Async„Flag muss nicht gesetzt sein.

Mit dem async Das Attribut „content“ bedeutet natürlich, dass das Skript asynchron ausgeführt wird.Die Spezifikationssprache scheint eine Möglichkeit zu lassen, die synchrone Ausführung des Skripts zu erzwingen (indem das Attribut festgelegt und dann entfernt wird), aber in der Praxis funktioniert das nicht und ist wahrscheinlich nur ein wenig vage in der Spezifikation.Nicht vom Parser eingefügt script Elemente sind asynchron.

Dieses spezifizierte Verhalten ist das, was IE und Chrome immer getan haben, Firefox seit Jahren und das aktuelle Opera auch (ich habe keine Ahnung, wann es sich gegenüber dem alten Verhalten in der oben verlinkten Antwort geändert hat).

Es lässt sich ganz einfach testen:

var script = document.createElement("script");
script.src = "script.js";
console.log("a");
document.body.appendChild(script);
console.log("b");

...mit script.js Sein

console.log("script loaded");

...wird protokolliert

a
b
script loaded

Answer 2

Die Frage ist, tut s.async = true haben eine Verwendung für dynamisch eingefügt Skripts oder werden diese asynchron bereits geladen. Die Antwort ist, dass sie nicht asynchron in allen Browsern geladen wird, wie erklärt

Interessant -. Ich denke, es stellt sich heraus, dass ich in meinen Annahmen falsch war

Basierend auf diesen Thread im Forum jQuery-Entwickler:

http://forum.jquery.com / Thema / jquery-ajax-Asynchron-vs-html5-script-Asynchron

es sieht aus wie die async Eigenschaft ist entdeckt worden, eine Wirkung auf dynamisch angehängtes Skripts, zumindest in Firefox (und möglicherweise Opera, obwohl es noch nicht die Eigenschaft nicht unterstützt).

Der Forum-Thread zitiert auch asynchrone Tracking-Code-Implementierung von Google, das, obwohl er von der async Eigenschaft in dem entsprechenden Kontext zu machen scheint, scheint tatsächlich die Syntax falsch zu bekommen. Google verwendet:

ga.async = true;

, wenn offenbar das nicht funktioniert; die richtige Methode wäre entweder zu verwenden:

ga.async = 'async';

oder

ga.setAttribute('async', 'async');

So, basierend auf meinem aktuellen Verständnis, dass nicht alle Browser ausführen wird tatsächlich dynamisch angehängten Skripts unmittelbar nach ihrer Einführung in den DOM in allen Fällen; Firefox (und schließlich Opera) die async Eigenschaft muss festgelegt werden, um sicherzustellen, dass dies geschieht immer.

Weitere Informationen über Firefox-Implementierung von async hier:

https://bugzilla.mozilla.org/show_bug.cgi?id=503481

Ich glaube, Sie haben recht.

Steve eigenen Beispiele er tut von dem Asynchron-Attribute nicht gesetzt, bevor den Script-Tag mit dem Kopfelement befestigt wird.

Mein Verständnis von der async atttribute dass es eine Möglichkeit, um den Browser zu signalisieren, dass Sie nicht unter Verwendung von document.write so der Seite zu manipulieren beabsichtigen, dass sie machen weiter Einhalt zu gebieten statt, um das Skript zu laden. Lesen Sie die Dokumentation für das Skriptelement bei mdc , die ein bisschen auf dem mehr enthalten document.write / Asynchron-Fragen.

Beachten Sie, dass mit Ihrer Technik sollten Sie sowieso nicht verwenden document.write, da Sie nicht wissen, haben, wo in der Seite Lebensdauer Ihr Skript geladen werden.

Answer 3

Answer 4

Answer 5

Answer 6

Interessant -. Ich denke, es stellt sich heraus, dass ich in meinen Annahmen falsch war

Basierend auf diesen Thread im Forum jQuery-Entwickler:

Answer 7

Answer 8

Ich glaube, Sie haben recht.

Steve eigenen Beispiele er tut von dem Asynchron-Attribute nicht gesetzt, bevor den Script-Tag mit dem Kopfelement befestigt wird.

Mein Verständnis von der async atttribute dass es eine Möglichkeit, um den Browser zu signalisieren, dass Sie nicht unter Verwendung von document.write so der Seite zu manipulieren beabsichtigen, dass sie machen weiter Einhalt zu gebieten statt, um das Skript zu laden. Lesen Sie die Dokumentation für das Skriptelement bei mdc , die ein bisschen auf dem mehr enthalten document.write / Asynchron-Fragen.

Beachten Sie, dass mit Ihrer Technik sollten Sie sowieso nicht verwenden document.write, da Sie nicht wissen, haben, wo in der Seite Lebensdauer Ihr Skript geladen werden.