JavaScript kann asynchron geladen werden. Asynchrones Laden bedeutet, dass der Browser beim Herunterladen und Ausführen von JavaScript weiterhin nachfolgende Seiten verarbeitet. Dadurch kann das Laden von Skriptdateien optimiert und die Ladegeschwindigkeit der Seite verbessert werden, da in jedem Browser unterschiedliche Mechanismen zum Parsen von Skriptdateien erforderlich sind verwendet asynchrones Laden.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.
1. Zunächst müssen Sie verstehen, was asynchron und synchron ist.
Synchronisiertes Laden: Der synchrone Modus, auch Blockierungsmodus genannt, verhindert die nachfolgende Verarbeitung durch den Browser und stoppt ihn Das Parsen wird daher gestoppt, sodass das anschließende Laden von Dateien (z. B. Bilder), das Rendern und die Codeausführung gestoppt werden.
Asynchrones Laden: Asynchrones Laden wird auch als nicht blockierend bezeichnet. Der Browser verarbeitet nachfolgende Seiten weiterhin, während er js herunterlädt und ausführt.
Laienhaft ausgedrückt: Synchronisation bedeutet, dass ich, wenn du mich zum Abendessen bittest, mit dir essen gehe, wenn ich dich nicht höre; wenn du mich nicht hörst, rufst du mich so lange an, bis ich dir sage, dass ich es gehört habe Sie, und dann gehen wir zusammen essen.
Asynchron bedeutet, dass Sie mich anrufen und dann alleine essen gehen. Ich gehe möglicherweise sofort, nachdem ich die Nachricht erhalten habe, oder ich warte, bis ich Feierabend habe, um zu essen. Wenn Sie also möchten, dass ich Sie mit einer Mahlzeit verwöhne, verwenden Sie die synchrone Methode, und wenn Sie mich mit einer Mahlzeit verwöhnen möchten, verwenden Sie die asynchrone Methode, damit Sie Geld sparen können.
2. Warum sollten wir asynchrones
verwenden, um das Laden von Skriptdateien zu optimieren? Es war schon immer sehr wichtig, die Seitenladegeschwindigkeit zu verbessern. Da jeder Browser über unterschiedliche Mechanismen zum Parsen von Skriptdateien verfügt und das Laden von Skripten das Laden anderer Ressourcen und Dateien blockiert, wird häufiger das asynchrone Laden verwendet.
3. So verwenden Sie asynchrones Laden
Der Herausgeber ist der Ansicht, dass es drei Möglichkeiten gibt, asynchrones Laden zu verwenden.
async, nach dem Laden ausgeführt, kann nur externe Skripte laden, js kann nicht in das Skript-Tag geschrieben werden.
//1.async 只能加载外部脚本 <script src="js/index.js" async="async"></script>
defer wird asynchron geladen, wird aber erst ausgeführt, wenn das Dom-Dokument vollständig analysiert ist. Nur IE kann internes und externes js verwenden. Laden Sie es bei Bedarf. Berücksichtigen Sie die Browserkompatibilität. Fügen Sie dem Dokument Elementobjekte und Textknoten hinzu, nachdem Sie HTML-Elemente und deren Textinhalt analysiert haben. Zu diesem Zeitpunkt document.readyState = ‚loading‘.
2. Wenn Sie auf einen externen CSS-Link stoßen, erstellen Sie einen Thread, um das Dokument zu laden und weiter zu analysieren.
3. Wenn ein Skript auf ein externes JS trifft und kein Async oder Defer eingestellt ist, lädt und blockiert der Browser, wartet auf das Laden des JS, führt das Skript aus und fährt dann mit der Analyse des Dokuments fort.
4. Wenn Sie auf externe JS-Skripts stoßen und Async und Defer einrichten, erstellt der Browser einen Thread zum Laden und analysiert das Dokument weiter. Bei Skripten mit asynchronen Attributen werden diese sofort nach dem Laden des Skripts ausgeführt. (Es ist verboten, document.write() asynchron zu verwenden.)
5 Wenn Sie auf IMG usw. stoßen, analysieren Sie zunächst die DOM-Struktur normal, dann lädt der Browser src asynchron und analysiert das Dokument weiter.
6. Wenn das Parsen des Dokuments abgeschlossen ist, ist document.readyState = „interaktiv“.
7. Nachdem das Parsen des Dokuments abgeschlossen ist, werden alle mit „Defer“ eingestellten Skripte der Reihe nach ausgeführt. (Beachten Sie, dass es sich von async unterscheidet, die Verwendung von document.write() jedoch ebenfalls verboten ist.)
8 Das Dokumentobjekt löst das DOMContentLoaded-Ereignis aus, das auch die Umwandlung der Programmausführung von der synchronen Skriptausführungsphase markiert die ereignisgesteuerte Bühne.
9. Wenn alle asynchronen Skripte geladen und ausgeführt sind und img usw. geladen sind, document.readyState = „complete“, löst das Fensterobjekt das Ladeereignis aus.
10. Von nun an werden Benutzereingaben, Netzwerkereignisse usw. asynchron verarbeitet.
Verwandte Empfehlungen:
Javascript-Lern-TutorialDas obige ist der detaillierte Inhalt vonKann Javascript asynchron geladen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
