Können Sie sowohl das async und defer Attribute für einen HTML-script-tag?

Ich würde gerne laden Sie in den folgenden JavaScript-code mit beiden defer und async:

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

Seit defer wird unterstützt von Internet Explorer 5.5+, wie man an CanIUse.com, ich möchte anmutig fallback zu verwenden aufschieben, wenn async ist nicht verfügbar. Async-ich denke, besser ist zu verwenden, wenn es verfügbar ist, aber nicht unterstützt, bis Internet Explorer 10.

Meine Frage ist daher ist der obige code Valide HTML? Wenn nicht, ist es möglich, diese situation mit Hilfe von JavaScript, die anmutig fallen wieder auf die Verwendung defer auf ein Skript, wenn async ist nicht verfügbar?

InformationsquelleAutor Jasdeep Khalsa | 2012-12-11
  1. 105

    Aus der Spezifikation: https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

    Das defer-Attribut kann angegeben werden, auch wenn das async-Attribut angegeben ist, zu bewirken, dass veraltete Web-Browser, die das unterstützen nur aufschieben (und nicht async) zurückgreifen, um das aufschieben Verhalten, anstatt die synchrone blockierende Verhalten ist die Standardeinstellung.

    • +1 für das eintauchen in die W3C-spec
    • Ist das wahr?: 1.beide async defer vorhanden, modernen Browsern laufen als async; 2.beide async defer vorhanden, alte Browser laufen als defer statt default Verhalten
    • Nicht async und defer das Gegenteil tun? Async laden Sie das Skript gleichzeitig, aber ausgeführt wird, wenn Sie fertig geladen ist (wird angehalten die Seite zu Parsen), aber Aufschieben wird nur ausgeführt, am Ende alle laden und zu analysieren?
    • Wenn das async-Attribut vorhanden ist, dann wird das script asynchron ausgeführt, sobald es verfügbar ist. Wenn das async-Attribut ist nicht vorhanden, aber das defer-Attribut vorhanden ist, dann wird das Skript ausgeführt, wenn die Seite fertig analysieren. In beiden Fällen, beim laden einer Seite nicht blockiert ist.
    • Das ist, warum es sagt "fallback." Moderne bevorzugen async zu defer. Und ja @vikyd. Wenn Sie nur kümmern sich nicht um das Erbe, Sie wollen nie beide auf der gleichen <script>.
    InformationsquelleAutor dave
  2. 15

    Die Frage ist, was würde Sie erwarten, es zu tun?
    Wenn beide async und aufschieben vorhanden sind, würde ich erwarten, dass das script verschoben werden und erst ausgeführt, nachdem DOMContentLoaded, wenn der browser im Leerlauf, aber wenn ich bin das Lesen der Spezifikation Recht, es sieht aus wie aufschieben wird ignoriert, wenn async gesetzt und das Skript wird asynchron geladen, so wird ausgeführt, sobald es verfügbar ist, das kann gut sein, vor dem DOMContentLoaded und blockiert möglicherweise andere Ressourcen.

    Gibt es drei mögliche Modi, die ausgewählt werden können die Verwendung dieser Attribute. Wenn das async-Attribut vorhanden ist, dann wird das script asynchron ausgeführt, sobald es verfügbar ist. Wenn das async-Attribut ist nicht vorhanden, aber das defer-Attribut vorhanden ist, dann wird das Skript ausgeführt, wenn die Seite fertig analysieren. Wenn weder-Attribut vorhanden ist, dann wird das Skript heruntergeladen und sofort ausgeführt, bevor der Benutzer-agent setzt das Parsen der Seite.

    https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

    InformationsquelleAutor Patrick Clancey
  3. 9

    Ja, die gültigen HTML-Code und funktioniert wie erwartet.

    Beliebigen W3C-konformen browser erkennen die async Attribut und behandeln das Skript richtig, in der Erwägung, dass legacy IE Versionen erkennen die aufschieben Attribut.

    Da beide Attribute sind boolean Sie nicht müssen weisen einen beliebigen Wert.

    • Danke @jandy für eine andere tolle Antwort!
    • "... funktioniert wie erwartet." Was würde Sie erwarten, es zu tun, obwohl?!
    InformationsquelleAutor jAndy
  4. 2

    Leider defer wird ignoriert, wenn async angegeben, und async haben immer eine höhere Priorität. (Zumindest in Chrome. Ehrlich gesagt, habe nicht getestet die in anderen Browsern, aber ich denke, das Ergebnis wird dasselbe sein.)

    Und ich persönlich denke, dass es sehr schlimm, dass defer ignoriert. Stellen wir uns die situation, wenn wir würden gerne einige JS initialisiert, so schnell wie möglich, noch vor dem laden der Inhalte auf der Seite. Aber wir wollen dieses Skript initialisiert ist, BEVOR der rest des Skripts, die es erfordert. Es sollte zunächst in defer Warteschlange. Aber, leider, das wird nicht funktionieren:

    <!-- we want "jQuery" ASAP and still in "defer" queue. But defer is ignored. -->
<script src="jquery.min.js" async defer></script>

<!-- this doesn't blocks the content and can wait the full page load, but requires "jQuery" -->
<script src="some_jquery_plugin.min.js" defer></script>

    In diesem Beispiel wird "some_jquery_plugin.min.js" geladen und ausgeführt werden kann, bevor der Ladevorgang von jQuery, und schlägt fehl. 🙁

    Also es gibt 2 Wege das problem zu lösen: entweder verwenden Sie nur defer Richtlinie oder merge-je nach javascript-Dateien in eine einzige JS.

    InformationsquelleAutor Aleksey Kuznetsov
Schreibe einen Kommentar