So optimieren Sie Ihre JavaScript-Apps mithilfe von Loops

Jeder möchte leistungsstarke Apps. In diesem Beitrag erfahren Sie, wie Sie dieses Ziel erreichen.

Eines der einfachsten und am meisten vernachlässigten Dinge, die Sie tun können, um die Leistung Ihrer JavaScript-Anwendungen zu steigern, ist zu lernen, wie Sie richtig leistungsfähige Schleifenanweisungen schreiben. Die Idee dieses Artikels ist es, dabei zu helfen.

Wir werden die wichtigsten Arten von Schleifen sehen, die in JavaScript verwendet werden, und wie wir sie auf performante Weise schreiben können.

Lass uns anfangen!

Schleifenleistung

Wenn es um die Leistung von Schleifen geht, geht es immer darum, welche Schleife verwendet werden soll. Welches ist das schnellste und leistungsstärkste? Die Wahrheit ist, dass von den vier von JavaScript bereitgestellten Schleifentypen nur einer signifikant langsamer ist als die andere - for-inSchleife. Die Auswahl des Schleifentyps sollte eher auf Ihren Anforderungen als auf Leistungsproblemen basieren .

Es gibt zwei Hauptfaktoren, die zur Schleifenleistung beitragen - die pro Iteration geleistete Arbeit und die Anzahl der Iterationen .

In den folgenden Abschnitten werden wir sehen, wie wir durch Verringern einen positiven Einfluss auf die Schleifenleistung haben können.

Für Schleife

ECMA-262 (die Spezifikation, die die grundlegende Syntax und das Verhalten von JavaScript definiert), die dritte Ausgabe, definiert vier Arten von Schleifen. Die erste ist die Standardschleife for, die ihre Syntax mit anderen C-ähnlichen Sprachen teilt:

for (var i = 0; i < 10; i++){ //loop body}

Dies ist wahrscheinlich das am häufigsten verwendete JavaScript-Schleifenkonstrukt. Um zu verstehen, wie wir seine Arbeit optimieren können, müssen wir ihn ein wenig zerlegen.

Präparation

Die forSchleife besteht aus vier Teilen: Initialisierung, Vortestbedingung, Schleifenkörper und Nachausführung. Es funktioniert folgendermaßen: Zuerst wird der Initialisierungscode ausgeführt (var i = 0;). Dann die Vortestbedingung (i <10;). Wenn die Vortestbedingung to true auswertet , wird der Hauptteil der Schleife ausgeführt. Danach wird der Post-Execute-Code (i ++) ausgeführt.

Optimierungen

Der erste Schritt zur Optimierung des Arbeitsaufwands in einer Schleife besteht darin, die Anzahl der Objektelemente und die Suche nach Arrayelementen zu minimieren.

Sie können die Leistung von Schleifen auch erhöhen, indem Sie ihre Reihenfolge umkehren. In JavaScript führt das Umkehren einer Schleife zu einer geringfügigen Leistungsverbesserung für Schleifen, vorausgesetzt, Sie eliminieren dadurch zusätzliche Operationen.

Beide obigen Aussagen gelten auch für die beiden anderen schnelleren Schleifen ( whileund do-while).

// original loop for (var i = 0; i < items.length; i++){ process(items[i]); } // minimizing property lookups for (var i = 0, len = items.length; i < len; i++){ process(items[i]); } // minimizing property lookups and reversing for (var i = items.length; i--; ){ process(items[i]); }

While-Schleife

Der zweite Schleifentyp ist die whileSchleife. Dies ist eine einfache Vortestschleife, die aus einer Vortestbedingung und einem Schleifenkörper besteht.

var i = 0; while(i < 10){ //loop body i++; }

Präparation

Wenn die Vortestbedingung ausgewertet wird, truewird der Schleifenkörper ausgeführt. Wenn nicht, wird es übersprungen. Jede whileSchleife kann durch ersetzt werden forund umgekehrt.

Optimierungen

// original loop var j = 0; while (j < items.length){ process(items[j++]); } // minimizing property lookups var j = 0, count = items.length; while (j < count){ process(items[j++]); } // minimizing property lookups and reversing var j = items.length; while (j--){ process(items[j]); }

Do-While-Schleife

do-whileist der dritte Schleifentyp und die einzige Post-Test-Schleife in JavaScript. Es besteht aus einer Körperschleife und einem Zustand nach dem Test:

var i = 0; do { //loop body } while (i++ < 10);

Präparation

Bei dieser Art von Schleife wird der Schleifenkörper immer mindestens einmal ausgeführt. Dann wird die Bedingung nach dem Test ausgewertet, und wenn dies der trueFall ist, wird ein weiterer Schleifenzyklus ausgeführt.

Optimierungen

// original loop var k = 0; do { process(items[k++]); } while (k < items.length); // minimizing property lookups var k = 0, num = items.length; do { process(items[k++]); } while (k < num); // minimizing property lookups and reversing var k = items.length - 1; do { process(items[k]); } while (k--);

For-In-Schleife

Der vierte und letzte Schleifentyp wird als for-inSchleife bezeichnet.Es hat einen ganz besonderen Zweck - es listet die benannten Eigenschaften eines JavaScript-Objekts auf. Hier sieht es so aus:

for (var prop in object){ //loop body }

Präparation

Es ähnelt der regulärenfor Schleife nur durch ihren Namen. Die Art und Weise, wie es funktioniert, ist völlig anders. Und dieser Unterschied macht es viel langsamer als die anderen drei Schleifen, die äquivalente Leistungsmerkmale aufweisen, so dass es nicht sinnvoll ist, zu bestimmen, welche am schnellsten ist.

Jedes Mal, wenn die Schleife ausgeführt wird, hat die Variable propden Namen einer anderen Eigenschaft, bei der es sich um eine Zeichenfolge handelt. object.Sie wird ausgeführt, bis alle Eigenschaften zurückgegeben wurden. Dies wären die Eigenschaften des Objekts selbst sowie diejenigen, die durch seine Prototypenkette geerbt wurden.

Anmerkungen

Sie sollten niemals "verwenden for-in”, um über Mitglieder eines Arrays zu iterieren .

Jede Iteration durch diese Schleife bewirkt eine Eigenschaftssuche entweder auf der Instanz oder auf dem Prototyp, wodurch die for-inSchleife viel langsamer als die anderen Schleifen wird. Bei der gleichen Anzahl von Iterationen kann es siebenmal langsamer sein als der Rest.

Fazit

  • Das for, whileund do-whileSchleifen all ähnliche Leistungsmerkmale haben, und so kein Schleifentyp ist wesentlich schneller oder langsamer als die andere.
  • Vermeiden Sie die for-inSchleife, es sei denn, Sie müssen eine Reihe unbekannter Objekteigenschaften durchlaufen.
  • Die besten Möglichkeiten zur Verbesserung der Schleifenleistung bestehen darin , den Arbeitsaufwand pro Iteration zu verringern und die Anzahl der Schleifeniterationen zu verringern .

Ich hoffe das war nützlich für dich, genauso wie für mich!

Danke fürs Lesen.

Ressourcen

"Hochleistungs-JavaScript" - Nicholas C. Zakas

Lesen Sie mehr meiner Artikel auf mihail-gaberov.eu.