Heim  >  Artikel  >  Web-Frontend  >  Leistungsprobleme mit JavaScript-Schleifenanweisungen

Leistungsprobleme mit JavaScript-Schleifenanweisungen

黄舟
黄舟Original
2017-02-28 14:18:421371Durchsuche

In den meisten Programmiersprachen verbrauchen Schleifenanweisungen die meiste Zeit
Und Schleifenanweisungen sind ein sehr wichtiges Programmiermuster

In unserem JavaScript gibt es vier Arten von Schleifen

  1. for-Schleife

  2. While-Schleife

  3. Do-While-Schleife

  4. For-In-Schleife

Die ersten drei Schleifen kommen auch in anderen Sprachen sehr häufig vor
Die For-In-Schleife ist möglicherweise neu für Schüler, die C/C++ in der Schule studiert haben
Sie durchsucht Instanz- und Prototypeigenschaften, also es verursacht mehr Overhead pro Iteration
Die For-In-Schleife ist am Ende nur 1/7 so schnell wie die anderen drei Typen
Also, es sei denn, wir müssen explizit über eine unbekannte Anzahl von Eigenschaftenobjekten iterieren, andernfalls sollten wir das tun Versuchen Sie, die Verwendung von for-in
zu vermeiden, geschweige denn eine for-in-Schleife zum Durchlaufen des Arrays

. Wir können ein klares Objekt wie folgt iterieren

var props = [&#39;prop1&#39;, &#39;prop2&#39;],      i = 0;while(i < props.length){
    fn(obj[props[i++]]);
}

Dieser Code erstellt ein Array von Objektattributen basierend auf den Attributen im Objekt und verwendet dann eine While-Schleife, um die Attributliste zu durchlaufen und die entsprechenden Attributwerte zu verarbeiten
Auf diese Weise muss nicht nach jedem Attribut von gesucht werden das Objekt, was den Schleifenaufwand reduziert

Die Prämisse des obigen Ansatzes ist, dass die internen Eigenschaften des Objekts bekannt sind
Wenn wir die interne Implementierung des Objekts nicht kennen
Wir haben sie immer noch um mit den Eigenschaften des Objekts selbst umzugehen, und wir können nur dies tun

for(var prop in obj){    if(obj.hasOwnProperty(prop)){
        //...
    }
}

Der Preis besteht darin, dass bei jeder Iteration festgestellt werden muss, ob die Eigenschaft die eigene Eigenschaft des Objekts ist und nicht geerbt.

Mit Ausnahme von for-in ist die Leistung anderer Schleifen ähnlich. Sie sollten daher die Anforderungen berücksichtigen und den Schleifentyp auswählen.


Ich glaube, dass Freunde, die gerade Programmieren gelernt haben, mit dem Schreiben von Schleifen vertraut sind

for(var i = 0; i < arr.length; i++){
    fn(arr[i]);
}

Jedes Mal, wenn diese Schleifenanweisung wiederholt wird, müssen wir das Längenattribut in arr nachschlagen, was sehr zeitaufwändig ist
Damit wir optimieren können,

for(var i = 0, len = arr.length; i < len; i++){
    fn(arr[i]);
}

Den Array-Längenwert in einer lokalen Variablen zwischenspeichern, damit das Problem gelöst ist
Das Gleiche gilt für while, do-while
Abhängig von der Array-Länge kann es in vielen Browsern etwa 25 % der Laufzeit einsparen


Wir können die Leistung auch leicht verbessern, indem wir die Reihenfolge des Arrays umkehren

for(var i = items.length; i--;){
    process(items[i]);
}
var j = items.length;while(j--){
    process(items[j]);
}
var k = items.length - 1;do {
    process(items[k]);
}while(k--);

Auf diese Weise wird jede Iterationskontrollbedingung anhand von zwei Zeitpunkten beurteilt ( ob die Anzahl der Iterationen geringer ist als die Gesamtzahl, ob es wahr ist)
wird auf ein Urteil reduziert (ob es wahr ist), wodurch sich die Schleifengeschwindigkeit weiter verbessert


Ein paar letzte Worte
Wir haben vielleicht alle einige Array-Methoden wie arr.forEach() oder einige Framework-Iterationsmethoden wie $().each() von jQuery verwendet. Um über ein Array zu iterieren,
Diese Methoden führen eine Funktion für jedes Element von aus das Array
Obwohl sie praktisch sind, sind sie viel langsamer als eine normale Schleife (Aufruf einer externen Methode)
In allen Fällen ist die schleifenbasierte Iteration etwa achtmal schneller als die funktionsbasierte Iteration
Also wir Versuchen Sie, diese gewöhnlichen Schleifen (for, while, do-while) zu verwenden, wenn wir gewöhnliche Schleifen (for, while, do-while) verwenden können, um Probleme zu lösen

Das Obige ist JavaScript In Bezug auf die Leistungsprobleme von Schleifenanweisungen Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Array und Objekt in jsNächster Artikel:Array und Objekt in js