geschrieben am Mittwoch, 29. Juni, 2011

Performance ist wichtig. Das wissen wir. In JavaScript gibt es ein paar kleine Tricks, die dafür sorgen, euren Code schneller zu machen! Arrays sind eine wunderbare Erfindung, dass muss Ich euch wohl kaum erzählen. Über Arrays iterieren zu können, ist noch viel toller! Allerdings kann die ein oder andere Loop dafür sorgen, eure Applikation langsamer zu machen.

Caching rettet eurer App das leben

Denkt man kurz darüber nach, mag es auf den ersten Blick kaum Dinge geben, die man an einer for-Schleife ändern sollte, um diese performanter zu machen. Aber der Teufel steckt im Detail. Besonders die Verwendung der hauseigenen length-Eigenschaft kann in Verbindung einer for-Schleife eine Menge Zeit kosten. Hier mal ein üblicher Fall.

for (var i = 0; i < my_array.length; i++) {
    // mach was
}

Was wir hier sehen ist nichts sonderlich Ungewöhnliches. Wir haben unser Array und verwenden dessen Länge, um über einen bestimmten Bereich zu iterieren und irgendwas zu machen. Ganz normale Schleife, ganz normale Verwendung. Und genau das ist das Problem. Im obigen Code, muss bei jedem Durchlauf die Länge unseres Arrays ermittelt werden und zwar ganz allein durch den Aufruf der length-Eigenschaft.

Würden wir nun über das DOM iterieren, arbeiten wir mit HTMLCollection-Objects. Und das, meine Damen und Herren, reißt unsere Performance NOCH ein Stückchen runter ins verderben. Und zwar ein ziemlich Großes. Wenn man sich das mal durch den Kopf gehen lässt, schreit es förmlich nach Optimierung. Warum? Ganz einfach. Die Länge unseres Arrays ist in diesem Fall konstant. Es muss nicht jedes mal ermittelt werden. Was also tun? Es ist einfach. Die Länge des Arrays muss nur zwischen gespeichert werden.

for(var i = 0; var length = my_array.length; i < length; i++) {
    // mach was
}

Und schon haben wir das Problem umgangen. Die Länge unseres Arrays wird initial einmal einer Variablen zugewiesen und von dort an als konstanter Wert verwendet, um den Bereich für die Iteration festzulegen.

Wir können den Code noch ein bisschen verkürzen, in dem wir das Single-Var-Pattern verwenden. Damit sparen wir uns die var-Anweisungen innerhalb der for-Schleife:

var i = 0,
    my_array = [],
    length;

    for (; length = my_array.length; i < length; i++;) {
        // mach was
    }

Oder wir lassen length einfach weg und zählen von i auf 0 runter – noch weniger Code!

var i = my_array.length;

for(; i > 0; i--) {
    // mach was
}

Cool! Und es geht NOCH kürzer!! Wie? Mit einer while-Schleife

var i = my_array.length;

while(i--) {
    // mach was
}

Awesome! Dieser Code übersteht JSLint zwar nicht, aber wenn wir unsere Prioritäten ein wenig verlegen, sollte das kein Problem sein.