Reputation: 393

is there any significant performance difference between this 2 methods of for-loop usage?

Just wondering what is the difference in the following 2 methods?

var a = 0;
var b = 0;
var c = 0;

for(var i = 0; i < 6; i++ ){
    a+=i;
    b+=i;
    c+=i;  
}

and

var a = 0;
var b = 0;
var c = 0;

for(var i = 0; i < 6; i++ ){
    a+=i; 
}

for(var i = 0; i < 6; i++ ){
    b+=i;
}

for(var i = 0; i < 6; i++ ){
    c+=i;  
}

*edited thanks locrizak for the correction

Upvotes: 1

Answers (7)

epascarello

Reputation: 207557

Paste it into the firebug console and time it. Making it work with large loops and you can see the differences easier.

console.time("group");
for(var x = 0; x<1000; x++){

    var a = 0;
    var b = 0;
    var c = 0;

    for(var i = 0; i < 6; i++ ){
        a+i;
        b+i;
        c+i;  
    }

}
console.timeEnd("group");


console.time("sep");
for(var x = 0; x<1000; x++){
    var a = 0;
    var b = 0;
    var c = 0;

    for(var i = 0; i < 6; i++ ){
        a+i; 
    }

    for(var i = 0; i < 6; i++ ){
        b+i;
    }

    for(var i = 0; i < 6; i++ ){
        c+i;  
    }
}
console.timeEnd("sep");

I get

group: 8ms
sep: 13ms

Upvotes: 0

locrizak

Reputation: 12279

The second one is doing 3X the amount of iterations it needs to. In the second one there are 18 iterations through the loops while the first there is only 6 making the script run faster. (In these circumstances you will not notice a difference because you are not doing much in the loops but once you want to do more it will be a performance issue)

Ps. a+i isn;'t doing anything you probably want a+=i

Upvotes: 3

Ruan Mendes

Reputation: 92334

I disagree with locrizak. The second is definitely not doing 3 times the work since each loop has a third of the statements as the first example. The extra work on the second example is that it needs to run the loop iteration steps 2 times as often as the first example.

initalize i (only once)
increment i (every iteration)
check if i < 6; (every iteration)

Therefore, in any real world example where the loop has more statements and the loop overhead gets smaller and smaller, you're very unlikely to notice a difference. That means you shold use multiple loops if it makes the code more readable.

I created this more real-life example to prove my point that both loops are, for most intents and purposes, the same: http://jsperf.com/testing-snippets/3

Upvotes: 1

Nick Husher

Reputation: 1884

Without knowing any of the details of the javascript interpreter, assume that the second code block is marginally worse than the first, but definitely not worth refactoring if it makes the code harder to read. Think about it this way:

for(var i = 0; i < 6; i += 1) {
    doSomeExpensiveThing();  // takes 500ms to process
    doSomeExpensiveThing();
    doSomeExpensiveThing();
}

And:

for(var i = 0; i < 6; i += 1) {
    doSomeExpensiveThing();  // takes 500ms to process
}
for(var i = 0; i < 6; i += 1) {
    doSomeExpensiveThing();
}
for(var i = 0; i < 6; i += 1) {
    doSomeExpensiveThing();
}

The two are going to be effectively identical because the overhead of running the loop will disappear compared to the cost of doing the inner computation.

Upvotes: 1

Piskvor left the building

Reputation: 92792

The only difference is the number of assignments, additions and comparisons on the variable i - and unless you're programming for a 1970s embedded computer (which you're not, as this is JavaScript), the speed difference is effectively zero; do not waste time on trying to nanooptimize it (e.g. the speed of computers makes this a non-issue, and modern JS interpreters may compile it anyway, so the difference is lost altogether).

If you're doing anything meaningful inside those loops, that will be your bottleneck, not the looping itself.

The only significant difference is maintenance - so use whichever form is easier to understand for the next person down the line who will inherit this.

Upvotes: 0