So implementieren Sie eine leistungsstarke Ladereihenfolge in Javascript

Dieser Artikel führt Sie hauptsächlich in die Ladereihenfolge und das Ausführungsprinzip von Hochleistungs-JavaScript ein. Der Artikel stellt ihn anhand von Beispielcodes ausführlich vor benötigt Freunde, lasst uns gemeinsam lernen.

Vorwort

Die Leistung von JavaScript im Browser kann heute als das schwerwiegendste Usability-Problem angesehen werden, mit dem Entwickler konfrontiert sind Im Kapitel über das Laden und Ausführen von Hochleistungs-Javascript werden wir darüber sprechen, wie die Ladereihenfolge und die Ausführungsprinzipien von js gelöst werden. Im Folgenden werde ich nicht viel sagen. Schauen wir uns die ausführliche Einführung an:

Wenn der Browser auf das Tag stößt, muss der Browser zuerst die externe Linkdatei herunterladen und sie dann ausführen. Während dieses Vorgangs werden das Rendern der Seite und die Benutzerinteraktion vollständig blockiert.

Wo platziere ich das Drehbuch am besten?

Diese Situation führt zweifellos zu ernsthaften Leistungsproblemen, da das Skript das Rendern der Seite blockiert, bis sie alle heruntergeladen und ausgeführt werden Weiter. Das Bild unten zeigt die Ausführungssequenz des Codes

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

Also eine der Möglichkeiten, die Leistung zu verbessern: Platzieren Sie das Skript unten im Körper

Organisieren Das Skript

Da jedes -Tag das Rendern der Seite blockiert, ist es wichtig, die Anzahl der in der Seite enthaltenen -Tags zu reduzieren : Sie können mehrere JS-Dateien zusammenführen. Der Vorteil des Packens in eine JS-Datei besteht darin, dass die Verzögerungszeit minimiert und die Gesamtleistung der Seite erheblich verbessert werden kann. Darüber hinaus können auch HTTP-Anfragen reduziert werden.

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 zu 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 laden die Seite.

Verzögertes Skript

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

Einfach ausgedrückt besteht der Verzögerungsmechanismus darin, die js-Datei herunterzuladen, bevor das DOM geladen wird, und blockiert keine anderen Prozesse des Browsers

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 Attribut ist: script, defer, load

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

Dynamisches Skript

Es gibt zwei Möglichkeiten, dynamisches Skript einzufügen: Die erste besteht darin, Skript-Tags dynamisch zu erstellen, und die zweite darin, die Seite über XMLHttpRequest einzufügen

Lassen Sie uns zunächst über die Verwendung der ersten Methode sprechen:

Der Kernpunkt dieser Technologie ist: Egal wann der Download gestartet wird, der Download- und Ausführungsprozess der Datei blockiert nicht andere Prozesse auf der Seite, sondern Wenn Sie dynamische Skriptknoten zum Herunterladen von JS-Dateien verwenden, wird der zurückgegebene Code sofort ausgeführt (mit Ausnahme von Firefox und Opera. Sie warten, bis alle vorherigen dynamischen Skriptknoten die Ausführung abgeschlossen haben)

In Mainstream-Browsern ein Ladeereignis wird ausgelöst, wenn das -Tag empfangen wird, der IE-Browser jedoch nicht, daher müssen wir ein Ladeereignis kapseln, das mit allen kompatibel ist. Die Methode kann in allen Browsern verwendet werden

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

Auf diese Weise geschriebener Code ist schwer zu warten

Die zweite Möglichkeit, ein Skript dynamisch zu erstellen

entspricht tatsächlich dem Erstellen eines -Tags mit Inline-Skript. Sobald das neu erstellte -Element zur Seite hinzugefügt wird, wird der Code sofort ausgeführt und ist einsatzbereit.

Vorteile: ist der heruntergeladene js-Code, führt ihn aber nicht sofort aus. Auf diese Weise können Sie die Ausführung des Skripts verschieben, bis Sie bereit sind

Nachteile: Die js-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 zuerst 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)]

Ich habe oben so viel vorgestellt, dass ich einige dynamische Lazy-Loading-Bibliotheken empfehlen möchte

Es gibt Bibliotheken wie YUI3, Ich persönlich finde die LABjs-Bibliothek besser, aber ich habe sie noch nie benutzt. Ich werde hier nicht erklären, wie man sie verwendet.

Zusammenfassung:

Mehrere Aspekte zur Verbesserung der JS-Leistung

1. Bevor Sie das Tag schließen, Verschieben Sie alle -Tags an das Ende der 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 -Tags

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

Mit der oben genannten Strategie können Sie viel erreichen Verbessern Sie diejenigen, die eine große Menge an js-Webanwendungen verwenden müssen.

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Erklärung des Geltungsbereichs in AngularJS

Implementierung des MVVM-Frameworks in JS (ausführliches Tutorial)

Wie implementiert requireJS einen Modullader?

JSsearch imitiert Taobao (ausführliches Tutorial)