Sea of Sin / Blog

  Grundszenario:
Wir wollen ein Array mit einer For-Schleife durchgehen.

Unser Array:

var myarray = new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);

Eine normale Standardschleife (Schleife 1):

for(var i = 0; i < myarray.length; i++)
{
    // irgendwas machen
}

Hmm schreiben wirs mal anders (Schleife 2):

for(var i = 0, len = myarray.length; i < len; i++)
{
    // irgendwas machen
}

Nun das ganze im Vergleich

Damit der Vergleich auch funktioniert werden beide For-Schleifen 100.000 mal im Test durchlaufen.

Firefox 3
Schleife1 = 424 Milisekunden
Schleife2 = 374 Milisekunden

Firefox 2
Schleife1 = 1016 Milisekunden
Schleife2 = 438 Milisekunden

IE 7
Bricht ab daher auf 10.000 runter gedrosselt
Schleife1 = 94 Milisekunden
Schleife2 = 62 Milisekunden

Opera
Schleife1 = 1032 Milisekunden
Schleife2 = 531 Milisekunden

Konqueror
Bricht ab daher auf 10.000 runter gedrosselt
Schleife1 = 766 Milisekunden
Schleife2 = 627 Milisekunden



Erklärung:

Wieso Schleife2 schneller ist, ist schnell erklärt. Wie oft die Schleife durchlaufen werden muss hängt von der Array Länge ab. Wenn i < myarray.length verwendet wird, muss jedesmal auf das „ myarray“ Objekt zurück gegriffen und die „length“ Eigenschaft aufgerufen werden.

Dies kostet Zeit. Da in der 2ten Schleife die Länge in die Variable „len“ geschrieben wird, muss das Objekt nicht mehr aufgerufen werden.

Bei einem minimalen Array hat dies keine grossen Auswirkung. Wenn jedoch größere Obejtek oder Arrays durchlaufen werden sollen kann dies viel Performance kosten.

Zum Livetest

Ich habe mir dies schon seit über einem Jahr angewöhnt eine For Schleife so zu schreiben.


Testcase Code

<script type="text/javascript">
 
        /**
         * Performance
         */
        var myarray = new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);
        var loops = 100000;
 
        function start_test()
        {
            for1();
            for2();
        }    
 
        function for1()
        {
            var start = new Date();
 
            for(l = 0; l < loops; l++)
            {
                for(var i = 0; i < myarray.length; i++)
                {
                    // irgendwas machen
                };
            };
 
            var end = new Date();
            loop = end-start;
 
            document.getElementById('for1').innerHTML = loop;
        };
 
        function for2()
        {
            var start = new Date();
 
            for(l = 0; l < loops; l++)
            {
                for(var i = 0, len = myarray.length; i < len; i++)
                {
                    // irgendwas machen
                };
            };
 
            var end = new Date();
            loop = end-start;
 
            document.getElementById('for2').innerHTML = loop;
        };
 
</script>

Gruss
henbug