(1) Fall 1
Ohne Zurückstellen oder Asynchronisieren lädt der Browser das angegebene Skript sofort und führt es aus, das heißt, er lädt und führt das Skript aus, sobald es gelesen wird, ohne auf nachfolgende geladene Dokumentelemente zu warten.
(2) Fall 2 (asynchroner Download)
Das async-Attribut bedeutet, dass das eingeführte JavaScript asynchron ausgeführt wird.Der Unterschied zu defer besteht darin, dass es nach dem Laden mit der Ausführung beginnt – sei es in der HTML-Parsing-Phase oder nachdem DOMContentLoaded ausgelöst wurde.
Auf diese Weise geladenes JavaScript blockiert weiterhin das Ladeereignis. Das heißt, async-script kann ausgeführt werden, bevor oder nachdem DOMContentLoaded ausgelöst wird, aber es muss ausgeführt werden, bevor das Laden ausgelöst wird.
(3) Fall 3 (verzögerte Ausführung)
Das defer-Attribut zeigt die verzögerte Ausführung des importierten JavaScripts an, d. h. das HTML stoppt die Analyse nicht, wenn dieses JavaScript geladen wird, und die beiden Prozesse laufen parallel ab.
Nachdem das gesamte Dokument geparst und das Defer-Skript geladen wurde (die Reihenfolge dieser beiden Dinge ist irrelevant), wird der gesamte vom Defer-Skript geladene JavaScript-Code ausgeführt, und dann wird das DOMContentLoaded-Ereignis ausgelöst.
Verglichen mit gewöhnlichem Skript hat defer zwei Unterschiede:
Es blockiert nicht das HTML-Parsing, wenn JavaScript-Dateien geladen werden, und die Ausführungsphase wird platziert, nachdem das HTML-Tag-Parsing abgeschlossen ist.
Beim Laden mehrerer JS-Skripts wird async nicht in der richtigen Reihenfolge geladen, während defer nacheinander geladen wird.
Zusammenfassen:
1), die Rolle von defer und async:
Wenn ein Skript-Tag in einem Dokument gefunden wird, wird auf herkömmliche Weise zuerst das js-Skript geladen, und das nachfolgende Laden des Dokuments wird zuerst gestoppt. Wenn Sie „defer“ und „async“ in das Skriptskript einfügen, können Sie das js-Skript und das asynchrone Laden des Dokuments veranlassen.
2) Der Unterschied zwischen Zurückstellen und Asynchronisieren
Der Unterschied besteht darin, wann das Skript ausgeführt wird, nachdem es vollständig geladen wurde.
- defer führt den js-Code nach dem Rendern des Browsers und vor dem DOMContentLoaded des Dokuments aus und führt den Code in der Reihenfolge des Ladens aus.
- async wird unmittelbar nach Abschluss des Ladevorgangs ausgeführt, es kann
vor oder nach dem Auslösen von DOMContentLoaded ausgeführt werden; es ist durch eine Ausführung außerhalb der Reihenfolge gekennzeichnet, da die Ladezeit jedes js-Codes unterschiedlich ist.
Denken Sie darüber nach, async ist für Anwendungsskripte nicht sehr nützlich, da Abhängigkeiten überhaupt nicht berücksichtigt werden (selbst die Ausführung in niedrigster Reihenfolge), aber es ist für Skripte, die von keinem Skript abhängen oder von keinem Skript abhängig sein können. Sehr gut geeignet, das typischste Beispiel: Google Analytics
Erweitertes Wissen über DOMContentLoaded:
Der Unterschied zwischen DOMContentLoaded und load: Beides sind Ereignisse, die ausgelöst werden, wenn die Seite geladen wird. Der Unterschied liegt im Zeitpunkt der Auslösung.
Schritte zum Laden von DOM-Dokumenten für die Browser-Rendering-Seite:
1. Parsen der HTML-Struktur.
2. Laden Sie externe Skripte und CSS-Dateien.
3. Analysieren und führen Sie den Skriptcode aus.
4. Der DOM-Baum wird erstellt. (Das Ereignis DOMContentLoaded wird zu diesem Zeitpunkt ausgelöst)
5. Laden Sie externe Bilder und andere Dateien.
6. Die Seite wird geladen. (Das Ladeereignis wird zu diesem Zeitpunkt ausgelöst)
Eine andere zu erwähnende Sache ist, dass das $(document).ready(function() { // ...code... }); das wir häufig in jQuery verwenden, tatsächlich auf das DOMContentLoaded-Ereignis und $(document).load lauscht (function( ) { // ...code... }); Der Listener ist das Ladeereignis.
Referenz:
- https://www.throatingwiththeweb.com/2014/02/async-vs-defer-attributes.html