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

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

When you are in doubt about JavaScript peformance, have an objective opinion:

http://jsperf.com/testing-snippets

Well, you are doing 3 times the work.

In the grand of scheme of things, 18 iterations of what your doing isn't going to have much impact, however comparitively it is much worse.

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.

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

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.

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