Stellen Sie kurz den Unterschied zwischen HTML5-Defer und Async vor

Der unten stehende Herausgeber wird Ihnen eine kurze Diskussion über HTML5Der Unterschied zwischen Aufschieben und Asynchronisieren geben. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.

Die wichtigste Möglichkeit, Javascript in eine HTML-Seite einzufügen, ist die Verwendung des 3f1c4e4b6b16bbbd69b2ee476dc4f83a Dieses Element wurde von Netscape erstellt und erstmals in Netscape Navigator 2 implementiert. Später wurde dieses Element zur offiziellen HTML-Spezifikation hinzugefügt. HTML4.01 definiert 6 -Attribute für 3f1c4e4b6b16bbbd69b2ee476dc4f83a, einschließlich defer und async. Sowohl defer als auch async sind optional und nur für externe Skriptdateien gültig.

1. Wenn der Browser das Skript ohne Verzögerung oder Asynchronisierung analysiert:

<script src="main.js"></script>

Durchsuchen Der Browser wird „Sofort“ bedeutet, dass das angegebene Skript vor dem Rendern unter dem Skript-Tag geladen und ausgeführt wird, d. h. es wird geladen und ausgeführt, sobald es gelesen wird, ohne auf das anschließende Laden von Dokumentelementen zu warten.

2. Wenn der Browser das Skript analysiert und eine Asynchronität vorliegt:

<script async src="main.js"></script>

Der Browser lädt herunter Führen Sie das Skript sofort aus, verhindern Sie jedoch nicht andere Vorgänge auf der Seite, z. B. das Herunterladen anderer Ressourcen oder das Warten auf das Laden anderer Skripts. Der Prozess des Ladens und Renderns nachfolgender Dokumentelemente erfolgt parallel (asynchron) zum Laden und Ausführen von main.js.

async garantiert nicht die Ausführung in der Reihenfolge, in der die Skripte erscheinen. Daher ist es sehr wichtig sicherzustellen, dass die beiden nicht voneinander abhängig sind. Der Zweck der Angabe des async-Attributs besteht darin, das zu verhindern Damit die Seite nicht auf den Download und die Ausführung der beiden Skripte wartet und dadurch asynchron lädt, wird empfohlen, dass asynchrone Skripte das DOM während des Ladens nicht ändern.

Das asynchrone Skript wird auf jeden Fall vor dem Ladeereignis der Seite ausgeführt, es kann jedoch auch vor oder nach Auslösung des DOMContentLoaded-Ereignisses ausgeführt werden. Zu den Browsern, die asynchrone Skripte unterstützen, gehören Firefox 3.6, Safari 5 und Chrome.

3. Wenn der Browser das Skript analysiert und es eine Verzögerung gibt:

<script defer="defer" src="main1.js"></script>
<script defer="defer"  src="main2.js"></script>

bedeutet, dass das Skript dies tut Das Laden nachfolgender Dokumentelemente wird verzögert, bis das Dokument vollständig analysiert und angezeigt wird, und erfolgt parallel zum Laden von main.js (asynchron). Die HTML5-Spezifikation verlangt, dass Skripte in der Reihenfolge ausgeführt werden, in der sie erscheinen, sodass das erste verzögerte Skript vor dem zweiten verzögerten Skript ausgeführt wird und beide Skripte vor dem DOMContentLoaded-Ereignis ausgeführt werden. In Wirklichkeit werden Verzögerungsskripte nicht unbedingt nacheinander ausgeführt, und sie werden auch nicht unbedingt ausgeführt, bevor das DOMContentLoaded-Ereignis ausgelöst wird. Daher ist es am besten, nur ein Verzögerungsskript einzuschließen.

IE4~IE7 unterstützen auch das Defer-Attribut für eingebettete Skripte, aber IE8 und spätere Versionen unterstützen das von HTML5 angegebene -Verhalten vollständig.

IE4, Firefox 3.5, Safari 5 und Chrome sind die ersten Browser, die das Defer-Attribut unterstützen. Andere Browser ignorieren dieses Attribut und behandeln das Skript wie gewohnt. Aus diesem Grund ist es immer noch die beste Option, verzögerte Skripte am Ende der Seite zu platzieren.

Die blaue Linie steht für das Lesen im Netzwerk, die rote Linie für die Ausführungszeit, beide für Skripte; die grüne Linie steht für die HTML-Analyse.

Dieses Bild zeigt uns die folgenden Punkte:

Verzögerung und Asynchronität sind in Bezug auf das Lesen (Herunterladen) im Netzwerk gleich. Beide sind asynchron (im Vergleich zum HTML-Parsing)

Der Unterschied zwischen ihnen liegt darin, wann das Skript nach dem Herunterladen ausgeführt wird. Offensichtlich kommt die Verzögerung unseren Anforderungen für das Laden und Ausführen von Anwendungsskripten am nächsten

In Bezug auf die Verzögerung. Das Unvollendete an diesem Bild ist, dass das Skript entsprechend der Ladereihenfolge ausgeführt wird.

Async ist ein Meister der Out-of-Order-Ausführung geladen und ausgeführt werden. Unabhängig von der Reihenfolge Ihrer Deklarationen wird sie sofort ausgeführt.

Denken Sie sorgfältig darüber nach, denn asynchron ist für Anwendungsskripte nicht sehr nützlich Es berücksichtigt überhaupt keine Abhängigkeiten (auch nicht die sequenzielle Ausführung auf der niedrigsten Ebene), eignet sich jedoch sehr gut für Skripte, die von keinem Skript abhängen oder von keinem Skript abhängig sind. Das typischste Beispiel: Google Analytics

Das obige ist der detaillierte Inhalt vonStellen Sie kurz den Unterschied zwischen HTML5-Defer und Async vor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!