Asynchrone und verzögerte Verwendung in Skript-Tags

Das Tag

script wird zum Laden und Ausführen von Skripten verwendet. Es kann als ein sehr wichtiges Tag in der Front-End-Entwicklung bezeichnet werden.
Wenn Sie das script-Skript direkt verwenden, wird html das Skript der Reihe nach laden und ausführen. Während des Skriptlade- und -ausführungsprozesses wird das nachfolgende DOM-Rendering blockiert.

Heutzutage ist jeder daran gewöhnt, auf der Seite auf verschiedene Skripte von Drittanbietern zu verweisen. Wenn es kleine Probleme mit dem Drittanbieter gibt, wie z. B. Verzögerungen, ist die Seite leer.
Glücklicherweise bietet script zwei Möglichkeiten, das oben genannte Problem zu lösen: async und defer. Diese beiden Attribute verhindern, dass script das Rendern von DOM blockiert.
Aber da es zwei Attribute gibt, bedeutet das, dass es einen Unterschied zwischen diesen beiden Attributen geben muss.

defer

Wenn das Tag script dieses Attribut festlegt, lädt der Browser die Datei asynchron herunter und hat keinen Einfluss auf das nachfolgende Rendern von DOM. Falls vorhanden Wenn mehrere
-Tags festgelegt sind, werden alle defers der Reihe nach ausgeführt. Das scriptscript-Skript wird ausgeführt, nachdem das Dokument gerendert wurde und bevor das
-Ereignis aufgerufen wird. deferDOMContentLoaded

Wir haben eine Testseite erstellt, die das Laden von zwei

-Tags enthält, und haben beiden das

-Logo hinzugefügt. scriptdeferP.S. Um intuitiver zu sein, haben wir eine Verzögerung von
bis und eine Verzögerung von script1.js bis 1s hinzugefügt. script2.js2s
Das Bild unten zeigt den Seitenladevorgang unddie Ausgabesequenz des Skripts.
Es ist nicht schwer zu erkennen, dass script zwar weniger Zeit zum Laden benötigt als
, aufgrund der Einschränkungen von script1 jedoch erst ausgeführt werden kann, nachdem das vorherige Skript ausgeführt wurde. Die Einstellung von script2defer

async

führt dazu, dass das

-Skript asynchron geladen und ausgeführt wird, sofern zulässig. Die Ausführung von asyncscript wird nicht in der Reihenfolge von
auf der Seite ausgeführt, sondern wer es zuerst lädt, wird ausgeführt. asyncscript

Wir haben die Testseite wie folgt geändert:

Die folgenden Ergebnisse wurden nicht geändert. Schließlich werden sie alle asynchron geladen Skripte. Aber wir können ein kleines Detail erkennen. Das Auslösen des

-Ereignisses wird durch das SkriptladenDOMContentLoaded nicht beeinflusst. Es wurde async ausgelöst, bevor das Skript geladen wurde. DOMContentLoaded

Wir modifizieren dann die Testseite. Laden Sie ein script-Skript ohne Verzögerung, damit das Skript sofort geladen werden kann.
Wir möchten testen, ob das async Skript schnell genug geladen wird, bevor es ausgeführt wird DOMContentLoaded ( Dieses Experiment basiert auf der Beschreibung des async Arguments „Ausführen, wenn zulässig“ ).
Gleichzeitig haben wir nach der Einführung des script-Skripts Tausende leerer p-Knoten hinzugefügt, um die Stabilität des Tests sicherzustellen, um die Renderzeit des Dokuments zu verlängern. Das Ausführungsergebnis von

ist wie erwartet. Wenn async eine bestimmte Zeitspanne gegeben wird, ist es möglich, es vor dem DOMContentLoaded-Ereignis auszuführen.

P.S. Aus dem Flammendiagramm in der oberen linken Ecke des Bildes oben können wir auch erkennen, dass es mehrere Segmente von blau gibt (Update: Ich war verwirrt, als ich schrieb es nachts, lila. Der eine rendert, der blaue analysiert das Dokument. Und die Reihenfolge von Console unten.
Es stimmt, dass die Ausführung von async ausgeführt wird, nachdem der Ladevorgang abgeschlossen ist, im Gegensatz zu defer, das darauf warten muss, dass alle Skripte geladen und der Reihe nach ausgeführt werden.

Zeichne ein paar Bilder und gib eine kurze Erklärung

Es gibt viele ähnliche Bilder im Internet, aber im Grunde sind es nur Beispiele mit Drehbuch
Es ist zu schäbig. Also holen wir uns eine Deluxe-Version und zeichnen ein Gantt-Diagramm, wenn mehrere Skripte geladen werden
Genau wie die großen Mobiltelefonhersteller in den letzten Jahren möchten sie alle ein X+X-Plus haben, wenn sie neue Telefone auf den Markt bringen

Verwenden Sie vier verschiedene Farben, um die Bedeutung jedes

Normalen Skripts anzuzeigen.

Wenn beim Parsen des Dokuments auf ein script-Skript gestoßen wird, wird es angezeigt wird stoppen Das Rendern der Seite wird heruntergeladen (hat jedoch keinen Einfluss auf das nachfolgende Parsen; Parsen und Rendern sind zwei verschiedene Dinge). Der Download von
-Ressourcen erfolgt während des Parsing-Vorgangs. Obwohl das script1-Skript schnell geladen wird, wird das script2 davor nicht geladen und ausgeführt, sodass es sich nur im angehaltenen Zustand befinden kann. Warten Sie, bis script2 abgeschlossen ist, bevor Sie es ausführen.
Wenn beide Skripte ausgeführt werden, wird die Seite weiterhin gerendert.

defer

Wenn beim Parsen eines Dokuments ein mit defer festgelegtes Skript angetroffen wird, wird es im Hintergrund heruntergeladen, das Rendern wird jedoch nicht verhindert des Dokuments, nachdem das Parsen und Rendern der Seite abgeschlossen ist.
wartet, bis alle defer-Skripte geladen und der Reihe nach ausgeführt werden. Nach der Ausführung wird das DOMContentLoaded-Ereignis ausgelöst.

asynchron

asyncDas Skript wird nach dem Laden ausgeführt.
asyncDas Laden von Skripten wird nicht in der DOMContentLoadedEreignisstatistik gezählt, was bedeutet, dass beide Situationen im Bild unten möglich sind

Empfohlene Anwendungsszenarien

aufschieben

Wenn Ihr Skriptcode vom DOM-Element auf der Seite abhängt (ob das Dokument gerendert wurde) oder von anderen Skriptdateien abhängig ist.
Beispiel:

1. Kommentarfeld

2. Code-Syntax-Hervorhebung

3. polyfill.js

async

Wenn sich Ihr Skript nicht um das DOM-Element auf der Seite kümmert (ob das Dokument gerendert wird), und es generiert keine Daten, die von anderen Skripten benötigt werden

Das obige ist der detaillierte Inhalt vonAsynchrone und verzögerte Verwendung in Skript-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!