Detaillierte Erläuterung der Ladereihenfolge und des Ausführungsprinzips von Hochleistungs-JavaScript

Die Leistung von JavaScript im Browser kann als das schwerwiegendste Benutzerfreundlichkeitsproblem angesehen werden, mit dem Entwickler konfrontiert sind. In diesem Artikel werden hauptsächlich relevante Informationen zur Ladereihenfolge und zum Ausführungsprinzip von Hochleistungs-JavaScript vorgestellt. Die Einführung ist sehr detailliert und hat einen gewissen Referenzwert für das Studium oder die Arbeit aller. Freunde, die es benötigen, können dem Herausgeber folgen, um gemeinsam zu lernen.

Wenn der Browser auf das Tag stößt, muss der Browser zuerst die externe Linkdatei herunterladen und sie dann ausführen mit dem Benutzer ist komplett gesperrt.

Wo platziere ich das Drehbuch am besten?

Diese Situation führt zweifellos zu ernsthaften Leistungsproblemen, da das Skript das Rendern der Seite blockiert und das Rendern der Seite erst fortgesetzt wird, wenn alle heruntergeladen und ausgeführt wurden Das Bild unten zeigt die Ausführungssequenz des Codes

Die erste JS-Datei wird heruntergeladen. Die zweite JS-Datei wird erst ausgeführt, wenn die erste JS-Datei vollständig heruntergeladen ist . , aber jetzt erlauben IE8, Firefox3.5, Safari4 und Chrome2 alle das parallele Herunterladen von js-Dateien. Leider blockiert der js-Download-Prozess immer noch den Download anderer Ressourcen, wie zum Beispiel: Bilder

, also einer von Die Möglichkeiten zur Verbesserung der Leistung sind: Platzieren Sie das Skript unten im Textkörper

Organisieren Sie das Skript

Da jedes -Tag blockiert die Seite beim Herunterladen, daher ist es wichtig, die Anzahl der auf der Seite enthaltenen -Tags zu reduzieren Dadurch kann die Verzögerungszeit minimiert und die Gesamtleistung der Seite deutlich verbessert werden, zusätzlich zur Reduzierung von HTTP-Anfragen.

Im Allgemeinen ist das Herunterladen einer einzelnen 100-KB-Datei schneller als das Herunterladen von vier 25-KB-Dateien.

Wenn mehrere externe Link-JS-Dateien vorhanden sind, können diese in einer JS-Datei zusammengeführt werden

Nicht blockierendes Skript

Obwohl das Herunterladen einer einzelnen großen JS-Datei nur eine HTTP-Anfrage generiert, führt dies dazu, dass der Browser für längere Zeit einfriert. Um diese Situation zu vermeiden, müssen Sie JS-Dateien nach und nach in die Seite laden.

Verzögertes Skript

Das Defer-Attribut gibt an, dass das in diesem Element enthaltene Skript verzögert ausgeführt werden kann, aber nur die Browser IE4+ und Firefox3.5+ unterstützen

Einfach ausgedrückt besteht der Verzögerungsmechanismus darin, die js-Datei herunterzuladen, bevor das DOM geladen wird, wodurch andere Prozesse des Browsers nicht blockiert werden

Die Popup-Reihenfolge für Browser, die das Defer-Attribut nicht unterstützen, lautet: defer,script,load

Die Popup-Reihenfolge für Browser, die das Defer-Attribut unterstützen, lautet : script, defer, load

Defer wird also aufgerufen, bevor das Onload-Ereignis ausgeführt wird

Dynamisches Skript

Es gibt zwei Möglichkeiten, dynamische Skripte einzufügen . Das erste besteht darin, Skripte dynamisch zu erstellen, das zweite darin, die Seite über XMLHttpRequest einzufügen. Lassen Sie uns zunächst über die Verwendung des ersten Tags sprechen:

Der Kernpunkt dieser Technologie ist: Egal, wann der Download gestartet wird, der Download- und Ausführungsprozess der Datei blockiert keine anderen Prozesse auf der Seite, aber wenn dynamische Skriptknoten zum Herunterladen von JS-Dateien verwendet werden, wird der Der zurückgegebene Code wird sofort ausgeführt (mit Ausnahme von Firefox und Opera, die auf die Ausführung aller vorherigen dynamischen Skriptknoten warten.)

Mainstream-Browser lösen ein Ladeereignis aus, wenn das -Tag empfangen wird Internet Explorer tut dies nicht, daher müssen wir eine Methode kapseln, die mit allen Browsern kompatibel ist

Der Nachteil dieser Methode besteht darin, dass Sie die Ladereihenfolge kennen müssen Die Dateien. Wenn es viele js-Dateien gibt und die Abhängigkeiten komplex sind, ist es schwierig, die Ladereihenfolge der Abhängigkeiten zu verwalten

Derart geschriebener Code ist schwer zu warten

Die zweite Möglichkeit, Skripte dynamisch zu erstellen

Äquivalent zum Erstellen eines -Tags, sobald das neu erstellte Wird der Seite hinzugefügt, wird der Code sofort ausgeführt und ist dann bereit.

Vorteile: Der js-Code wird heruntergeladen, aber nicht sofort ausgeführt. Auf diese Weise können Sie die Ausführung des Skripts verschieben, bis Sie bereit sind.

Nachteile: js Die Datei muss sich in derselben Domäne befinden wie die angeforderte Seite. Im Allgemeinen verwenden große Webanwendungen diese Methode nicht.

Es wird empfohlen, den nicht blockierenden Modus zu verwenden:

Fügen Sie zunächst den für die Dynamik erforderlichen Code hinzu und geben Sie dann vor, den verbleibenden Code der Seite zu initialisieren

[Bild-Upload fehlgeschlagen...(image-dd3f9-1515902024710)]

Oben vorgestellt Nachdem ich so viel gelesen habe, möchte ich einige dynamische Lazy-Loading-Bibliotheken empfehlen

Es gibt Bibliotheken wie YUI3, LazyLoad und LABjs. Ich persönlich denke, dass die LABjs-Bibliothek einfacher zu verwenden ist. Aber ich habe es noch nie verwendet. Die Verwendungsmethode wird hier nicht erwähnt.

Zusammenfassung:

Mehrere Aspekte zur Verbesserung der js-Leistung

1. Vor dem Schließen des Tags die Seite. Dadurch wird sichergestellt, dass die Seite vollständig gerendert wurde, bevor das Skript ausgeführt wird

2. Führen Sie das Skript zusammen. Je weniger -Tags Ihre Seite enthält, desto schneller wird sie geladen und reagiert. Dies gilt unabhängig von externen Linkdateien oder eingebetteten Skripten

3. Es gibt viele Möglichkeiten, js ohne Blockierung herunterzuladen

3.1 Verwenden Sie das Defer-Attribut des

3.2 Verwenden Sie dynamisch erstellte -Elemente, um Code herunterzuladen und auszuführen

3.3 Verwenden Sie XHR-Objekte, um JS-Code herunterzuladen und in die Seite einzufügen

Durch die oben genannten Strategien kann die tatsächliche Leistung von Webanwendungen, die eine große Menge an js erfordern, erheblich verbessert werden.

Verwandte Empfehlungen:

Eine kurze Analyse der Lade- und Ladereihenfolge von CSS

Die Ladereihenfolge und Ausführung von HTML, CSS und js-Dateien

Ladereihenfolge der $(document).ready()- und onload_javascript-Fähigkeiten von jquery