Können Sie sowohl die async- als auch die defer-Attribute für ein HTML-Tag verwenden?

Ich möchte den folgenden JavaScript-Code mit beiden laden defer und async:

<script defer async src="https://stackoverflow.com/js/somescript.js"></script>

Seit defer wird von Internet Explorer 5.5+ unterstützt, wie Sie unter sehen können CanIUse.com, möchte ich elegant auf die Verwendung von defer zurückgreifen, wenn async nicht verfügbar ist. Async ist meiner Meinung nach besser zu verwenden, wenn es verfügbar ist, aber es wird erst ab Internet Explorer 10 unterstützt.

Meine Frage ist daher, ist der obige Code gültiges HTML? Wenn nicht, ist es möglich, diese Situation mit JavaScript zu schaffen, indem man elegant auf die Verwendung zurückgreift defer auf einem Skript, wenn async ist nicht verfügbar?

Ja, Sie können beide Attribute verwenden, aber Sie müssen defer oder async verwenden, nicht beide. Weitere Informationen finden Sie im Vergleich und verwenden Sie einen, der Ihren Anforderungen entspricht.

defer-Attribut: Zuerst wird die Skriptdatei heruntergeladen und dann auf die HTML-Analyse gewartet. Nach dem Ende der HTML-Analyse wird das Skript ausgeführt. Mit anderen Worten, es garantiert, dass alle Skripte nach dem HTML-Parsing ausgeführt werden.

Das Defer-Attribut ist nützlich, wenn das Skript für DOM-Manipulationen verwendet wird. Bedeutet, dass das Skript auf Dokument-HTML angewendet wird.

Async-Attribut: Es lädt die Skriptdatei herunter und führt sie aus, ohne auf das Ende der HTML-Analyse zu warten. Mit anderen Worten, es wird nicht garantiert, dass alle Skripte nach dem HTML-Parsing ausgeführt werden.

Das Async-Attribut ist nützlich, wenn das Skript nicht für die DOM-Manipulation verwendet wird. Manchmal benötigen Sie ein Skript nur für serverseitige Operationen oder für die Handhabung von Cache oder Cookies, aber nicht für DOM-Manipulationen. Bedeutet, dass das Skript nichts mit dem verwendeten HTML zu tun hat.

Ja, es ist gültiges HTML und es funktioniert wie erwartet.

Jeder W3C-kompatible Browser erkennt die asynchron Attribut und behandeln Sie das Skript richtig, während Legacy IE Versionen erkennen die verschieben Attribut.

Da beide Attribute sind boolesch du nicht müssen, zu … haben einen beliebigen Wert zuweisen.

Die Frage ist, was erwartest du davon? Wenn beides asynchron und verschieben vorhanden sind, würde ich erwarten, dass das Skript verzögert und nur nach DOMContentLoaded ausgeführt wird, wenn der Browser im Leerlauf ist, aber wenn ich die Spezifikation richtig lese, sieht es so aus verschieben wird ignoriert, wenn asynchron gesetzt ist und das Skript asynchron geladen wird, also ausgeführt wird, sobald es verfügbar ist, was durchaus vor DOMContentLoaded sein kann und andere Ressourcen blockieren kann.

Es gibt drei mögliche Modi, die mit diesen Attributen ausgewählt werden können. Wenn das async-Attribut vorhanden ist, wird das Skript asynchron ausgeführt, sobald es verfügbar ist. Wenn das async-Attribut nicht vorhanden ist, aber das defer-Attribut vorhanden ist, wird das Skript ausgeführt, wenn die Analyse der Seite abgeschlossen ist. Wenn keines der beiden Attribute vorhanden ist, wird das Skript sofort abgerufen und ausgeführt, bevor der Benutzeragent mit dem Analysieren der Seite fortfährt.

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

Tatsächlich gibt es in den meisten Kommentaren hier ein Missverständnis. Die Leute scheinen nicht zu wissen, dass DEFER den Code auch parallel lädt, genau wie ASYNC. Aber es wartet auf die Ausführung nach dem Laden von DOM (aber bevor DOMContentLoaded ausgeführt wird), während ASYNC es sofort nach dem Laden ausführt, bevor DOM geladen wird. Da BOTH ASYNC und DEFER Code parallel laden, wäre es nicht nötig, beide zusammen zu verwenden (aber vielleicht, um mit Legacy umzugehen).