Die Hauptmethode zum Einfügen von JavaScript -Code in die HTML -Seite ist über das Skript -Tag. Dazu gehören zwei Formen. Die erste besteht darin, den JS -Code zwischen Skript -Tags direkt einzufügen, und die zweite besteht darin, externe JS -Dateien über das SRC -Attribut einzuführen. Da die Interpreter-Blöcke des Restes der Seite während des Parsens und Ausführens von JS-Code das Rendern der Seite rendern, wird ein langfristiges Blanken und Verzögerungen für Seiten mit einer großen Menge JS-Code verursacht. Um dieses Problem zu vermeiden, wird empfohlen, alle JS -Referenzen vor dem </body> -Tag zu platzieren.
Es gibt zwei Attribute von Skript -Tags, Aufschub und Async, daher ist die Verwendung von Skript -Tags in drei Situationen unterteilt:
1. <script src = "example.js"> </script>
Ohne das Aufschub- oder Async -Attribut lädt der Browser das entsprechende Skript sofort und führt sofort aus. Das heißt, bevor Sie das Dokument nach dem Skript -Tag rendern, warten Sie nicht auf das anschließende Laden der Dokumentelemente und beginnen Sie nach dem Lesen zu laden und zu führen. Dadurch blockiert das Laden des nachfolgenden Dokuments.
2. <script async src = "example.js"> </script>
Mit dem asynchronisierten Attribut bedeutet dies, dass das Laden und Rendering nachfolgender Dokumente parallel zum Laden und Ausführen von JS -Skripten, dh asynchrone Ausführung, durchgeführt wird.
3. <script defer src = "example.js"> </script>
Mit dem Defer -Attribut wird der Prozess des Ladens nachfolgender Dokumente und des Ladens des JS -Skripts (zu diesem Zeitpunkt nur geladen, aber nicht ausgeführt) parallel (asynchron) durchgeführt. Die Ausführung des JS -Skripts muss warten, bis alle Elemente des Dokuments analysiert sind und bevor das Domcontent -Ereignis die Ausführung auslöst.
Die folgende Abbildung kann intuitiv den Unterschied zwischen den drei erkennen:
Unter ihnen repräsentiert Blue die Ladezeit des JS -Skriptnetzwerks, Red repräsentiert die Ausführungszeit des JS -Skripts, und Grün repräsentiert die Auflösung des HTML.
Aus der Abbildung können wir die folgenden Punkte klären:
1. Auf Defer und Async sind im Netzwerkbelastungsprozess konsistent und werden beide asynchron ausgeführt.
2. Der Unterschied zwischen den beiden besteht darin, dass das Skript nach dem Laden ausgeführt wird. Es ist zu sehen, dass Aufschub eher den Anforderungen der meisten Szenarien für das Laden und Ausführen von Anwendungsskripts entspricht.
3. Wenn es mehrere Skripte mit Defer -Attributen gibt, führen sie das Skript in der Ladereihenfolge aus. Für Async ist die Belastung und Ausführung eng miteinander verbunden. Unabhängig von der Erklärungserklärung wird sie sofort ausgeführt, solange die Last abgeschlossen ist. Es nützt nur wenig Anwendungsskripte, da es überhaupt keine Abhängigkeiten berücksichtigt.
Zusammenfassung:
Der gemeinsame Punkt zwischen Defer und Async besteht darin, dass sie JS -Dateien parallel laden und das Laden der Seite nicht blockieren können. Der Unterschied besteht darin, dass JS nach dem Laden des Aufschubs darauf wartet, dass die gesamte Seite vor der Ausführung geladen wird. Async führt JS unmittelbar nach dem Laden aus. Wenn es daher eine strenge Ausführung der Ausführung von JS gibt, wird empfohlen, auf Verschiebung zu laden.
Das obige ist eine detaillierte Erläuterung des Unterschieds zwischen Defer- und Async -Attributen in JS, die Ihnen vom Herausgeber vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!