Zu den Vorschlägen (i) von JavaScript zur Verbesserung der Website -Leistung werden mehrere Vorschläge zur Verbesserung der Website der Website von HTTP -Anfragen bis hin zur Seitenwiedergabe vorgelegt. Dieser Artikel ist eine Zusammenfassung aus der Perspektive der JavaScript-Leistung, nachdem Steve Sounders ein anderes Buch gelernt hat, "Advanced Guide to High Performance-Website-Konstruktion".
Die JavaScript-Leistung ist der Schlüssel zur Implementierung von Hochleistungs-Webanwendungen
-Steve Sounders
1. Verwenden Sie JS Scope -Kette
Bereichskette
Bei der Ausführung eines Stücks JavaScript -Code (globaler Code oder Funktion) erstellt die JavaScript -Engine einen Umfang dafür, auch als Ausführungskontext bezeichnet. Nachdem die Seite geladen wurde, wird zuerst ein globaler Umfang erstellt, und dann wird jede Funktion ausgeführt. Ein entsprechender Bereich wird festgelegt, wodurch eine Bereichskette bildet. Jedes Bereich hat eine entsprechende Bereichskette, der Kopf der Kette ist der globale Bereich, und der Schwanz der Kette ist der aktuelle Funktionsbereich.
Der Zweck der Scope -Kette ist es, Kennungen zu analysieren. Wenn die Funktion erstellt wird (nicht ausgeführt), werden diese Argumente, benannten Parameter und alle lokalen Variablen in der Funktion dem aktuellen Bereich hinzugefügt. Wenn JavaScript die Variable X ermitteln muss (dieser Prozess wird als variable Auflösung bezeichnet), wird zunächst gesucht, ob es in der Kette der Kette ein X -Attribut vom Ende der Kette gibt, dh dem aktuellen Umfang. Wenn es nicht gefunden wird, suchen Sie weiter entlang der Bereichskette, bis der Kettenkopf, dh die globale Bereichskette, und die Variable nicht gefunden wird, es wird angenommen, dass es keine X -Variable in der Umfangskette dieses Codes gibt und eine Referenzfehler (ReferenzError) ausgeworfen wird.
Die Verwaltung der Tiefe der Bereichskette ist eine einfache Möglichkeit, die Leistung mit nur geringer Arbeit zu verbessern. Wir sollten langsame Ausführungsgeschwindigkeiten aufgrund eines unbeabsichtigten Wachstums der Bereichskette vermeiden.
Verwenden Sie lokale Variablen (kurze Zielfernrohrketten so weit wie möglich)
Wenn wir das Konzept der Scope -Kette verstehen, sollten wir klar sein, dass die Parsingvariablen der JavaScript -Engine mit der Tiefe der Bereichskette zusammenhängen. Offensichtlich befinden sich lokale Variablen am Ende der Kette und haben die schnellste Zugangsgeschwindigkeit. Eine gute Erfahrung ist daher: Wenn eine nicht lokale Variable mehr als einmal verwendet wird, verwenden Sie bitte lokale Variablen, um sie zu speichern, z. B.:
function changeIV () {document.getElementById ('mydiv'). className = 'geändert'; document.getElementById ('mydiv'). style.height = 150;}Hier wird das MyDiv -Dom -Element zweimal verwiesen. Für schnellere Referenz sollten wir es mit einer lokalen Variablen speichern. Die Vorteile, dies zu tun, verkürzt nicht nur die Umfangskette, sondern vermeiden auch doppelte Abfragen von DOM -Elementen:
function changeIV () {var mydivStyle = document.getElementById ('mydiv'). style; mydiv.className = 300; mydiv.style.height = 150;}Vermeiden Sie die Verwendung mit (wachsen Sie keine Zielfernrohrketten)
Im Allgemeinen ist die Umfangskette der Funktion während der Codeausführung festgelegt, kann jedoch die Umfangskette der Funktion vorübergehend erhöhen. mit wird verwendet, um Objekteigenschaften als lokale Variablen anzuzeigen, um sie leicht zugänglich zu machen, zum Beispiel:
var user = {name: 'vicfeel', Alter: '23 '}; Funktion showUser () {var local = 0; mit (user) {console.log ("name" + name); console.log ("Alter" + Alter); console.log (local);}} showuser ();In diesem Beispiel wird mit einem temporären Umfang zum Ende der ShowUser -Scope -Kette hinzugefügt, die alle Eigenschaften des Benutzerobjekts speichert, dh der Umfangskette mit dem Code erhöht. In diesem Code ändert sich lokale Variablen wie die lokale Änderung vom ersten Objekt am Ende der Kette zum zweiten, was natürlich den Zugriff von Kennungen verlangsamt. Bis die mit Aussage vorbei ist, setzt die Zielfernrohrkette das Wachstum fort. Aufgrund dieses Fehlers sollten wir versuchen, das With -Keyword zu vermeiden.
2 weitere vernünftige Flussregelung
Wie bei anderen Programmiersprachen hat JavaScript einige Flusssteuerungsanweisungen (Schleifen, Bedingungen usw.), und die Verwendung geeigneter Anweisungen für jeden Link kann die Laufgeschwindigkeit des Skripts erheblich verbessern.
Urteil des schnellen Zustands
Wenn es um das bedingte Urteil geht, kann der erste Weg zu vermeiden:
if(value == 0){return result0;}else if(value == 1){return result1;}else if(value == 2){return result2;}else if(value == 3){return result3;}else if(value == 4){return result4;}else if(value == 5){return result5;}else if(value == 6){return result6;}else{return Ergebnis7;}Das Hauptproblem bei dieser Methode, wenn für das bedingte Beurteilung das Niveau zu tief ist. Wenn ich Value = 7 will, verbraucht die Zeit viel länger als Wert = 0, was die Leistung stark verliert und eine schlechte Lesbarkeit ist.
Ein besserer Weg, um mit Switch Urteile zu fällen.
Swithc (Wert) {Fall 0: Rückgabeergebnis0; Fall 1: Rückgabeergebnis1; Fall 2: Rückgabeergebnis2; Fall 3: Rückgabeergebnis3; Fall 4: Rückgabeergebnis 4; Fall 5: Rückgabeergebnis 5; Fall 6: Rückgabeergebnis 6; Standard: Rückgabeergebnis 7;}Dies verbessert nicht nur die Lesbarkeit, sondern erfordert auch eine schnellere Abfragezeit als wenn. Aber wenn wenn Sie schneller als Schalter sind, wenn nur ein oder zwei Bedingungen
In JavaScript gibt es eine andere Möglichkeit, Bedingungen abzufragen. Das vorherige Beispiel bestand darin, unterschiedliche Werte gemäß dem Wert zurückzugeben, der nur Arrays verwenden kann, um die Abfrage von Hash -Tabellen zu implementieren.
// die Array var -Ergebnisse definieren = [Ergebnis0, Ergebnis1, Ergebnis2, Ergebnis3, Ergebnis4, Ergebnis5, Ergebnis6, Ergebnis 7]; // Abfrageergebnissergebnissergebnisse [Wert];
Diese Array -Methode ist effektiver, wenn der Abfragebereich groß ist, da es keine oberen und unteren Grenzen erkennen muss und nur den Indexwert für die Abfrage ausfüllen muss. Seine Einschränkung ist, dass die Bedingung eher einem einzelnen Wert als einer Reihe von Operationen entspricht. Daher müssen wir die tatsächliche Situation umfassend kombinieren, die entsprechende Beurteilungsmethode der Bedingungen auswählen und die Leistung maximieren.
Schneller Zyklus
JavaScript für Loop, Do-while-Loop, Schleifen und für die Schleife. Hier ist eine sehr häufig verwendete Recyclingmethode:
var values = [1,2,3,4,5]; für (var i = 0; i <values.length; i ++) {prozess (Werte [i]);}Wir können sehen, dass die offensichtlichste Optimierung dieses Codes Werte ist. Jede Schleife muss ich mit der Länge der Werte verglichen werden. Abfragungsattribute sind zeitaufwändiger als lokale Variablen. Wenn die Anzahl der Schleifen größer ist, wird es desto zeitaufwändiger sein. Daher kann es so optimiert werden:
var values = [1,2,3,4,5]; var Länge = Werte.Length; // Lokale Länge des variablen Speichers für (var i = 0; i <Länge; i ++) {prozess (Werte [i]);}Dieser Code kann auch weiter optimieren und die Schleifenvariable auf 0 verringern, anstatt die Gesamtlänge hinzuzufügen.
var values = [1,2,3,4,5]; var länge = Werte.Length; für (var i = länge; i-;) {// Decrement to 0Process (Werte [i]);}Hier wird das Ende der Schleife so umgewandelt, um mit 0 zu vergleichen, sodass die Geschwindigkeit jeder Schleife schneller ist. Abhängig von der Komplexität der Schleife kann diese einfache Änderung in etwa 50% der Zeit als zuvor sparen.