for loop vs forEach performance in javascript and credibility of jsperf results

Question

I don't trust results from jsperf measuring performance of for loop vs forEach. At least for chrome and firefox on my machine results are completely different than the ones being advertised in jsperf.
http://jsperf.com/foreach-vs-loop (mine)
http://jsben.ch/#/BQhED (more popular)
On my laptop running Ubuntu 11.10 I have the following results in Firefox:

for: total=1641 ms, avg=164.1 ms  
forEach: total=339 ms, avg=33.9 ms  

uname -a:  
Linux 3.0.0-16-generic #29-Ubuntu SMP Tue Feb 14 12:48:51 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux

Unfortunately, Chrome doesn't return the result of console.timeEnd() but the running times are same and just faster in Chrome. I'm observing that forEach almost 10x faster than for loop in Chrome, and 3x faster in Firefox.
In Chrome I'm getting approximately these running times:

for: avg=80 ms
forEach: avg=6 ms

Here's the code I ran in Firefox and Chrome console.

var arr = [];
for(var i = 0; i < 100000; i++) arr[i]=i;

var numberOfRuns = 10;

function time(name, f){
    console.time(name);
    f();
    return console.timeEnd(name);
}

function runTest(name, f){
    var totalTime = 0;
    for(var r = 0; r < numberOfRuns; r++)
        totalTime += time(name,f);
    return totalTime;
}

var forTime = runTest('for', function(){
    for(var j = 0; j < arr.length; j++)
        arr[j];    
});
var forEachTime = runTest('forEach', function(){
    arr.forEach(function(v){v;});
});

console.log('for', {total:forTime, avg:forTime / numberOfRuns});
console.log('forEach', {total:forEachTime, avg:forEachTime / numberOfRuns});

Running the tests for one million items has the same performance difference. Could you please advise if I'm missing something and I should trust jsperf results instead of the real ones I'm observing? Of course I do trust the real results that I can see right here right now in my browser.

EDIT: The test scenario isn't objective as discovered during discussion with @Blender. Looks like js optimizer optimezes forEach loop with no action in it and thus obscures running time if there were some real code.

jsPerf does real tests. The testing framework that it uses is just a more complex version of yours. Also, make sure to account for different browsers' JS engines. — Blender
– Blender, Commented Mar 17, 2012 at 1:59
Not a javascript developer, but I would guess the interpreter is optimizing v; to nothing, but still looks up the value of arr[j]. — ta.speot.is
– ta.speot.is, Commented Mar 17, 2012 at 2:01
The point of jsperf is to demonstrate relative performance differences. You are still seeing the same relative performance. What exactly are you doubting? — deceze
– deceze ♦, Commented Mar 17, 2012 at 2:05
@blender so what kind of the real tests are they if they don't prove in real scenario? — Diamond Hands
– Diamond Hands, Commented Mar 17, 2012 at 2:05
@ta.speot.is removed arr[i] and v from both and get slightly better performance of for loop but still forEach is much faster. — Diamond Hands
– Diamond Hands, Commented Mar 17, 2012 at 2:06

Blue · Accepted Answer · 2016-10-19 09:40:32Z

10

I modified your code to be more fair. Can you take a look at it?

var arr = [];
for (var i = 0; i < 100000; i++) arr[i] = i;

var numberOfRuns = 100;

function runTest(name, f) {
    var totalTime = 0;
    console.time(name);

    for (var r = 0; r < numberOfRuns; r++) {
        f();
    }

    return console.timeEnd(name);
}

function testFunction(v) {
    v;
}

var forTime = runTest('for', function() {
    for (var j = 0; j < arr.length; j++) {
        testFunction(arr[j]);
    }
});

var forEachTime = runTest('forEach', function() {
    arr.forEach(testFunction);
});

Your test wasn't 100% raw number crunching, so the benchmark was being optimized unfairly by some browsers.

edited Oct 19, 2016 at 9:40

Blue

23k7 gold badges69 silver badges102 bronze badges

answered Mar 17, 2012 at 2:40

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kushagra Gour Over a year ago

In your fiddle, for loop seems to be faster. But when I run the same code in the developer console, forEach wins everytime. Why would that be happening?

Blender Over a year ago

@KushagraGour: No clue. Ask a question.

Seraf Over a year ago

Hey 2012, 2018 here: Both are similar now.

user1031721 · Accepted Answer · 2016-05-20 07:30:02Z

5

Here is a real test: http://jsfiddle.net/ssSt5/57/ (run it multiple times)

Apparently they are practically the same.

So when there is real computation going on, for vs forEach doesn't matter. Other factors are much bigger influence on performance. Specially after the run time has applied optimizations.

answered May 20, 2016 at 7:30

user1031721

Comments

AnyWhichWay · Accepted Answer · 2017-01-05 16:28:17Z

-1

This site shows results for a full range of JavaScript looping approaches http://www.jsbenchmarks.com/?anywhichway/loop/master/benchmark.js. The results are the average of all site visitors running the benchmark compared to your own if you choose to run the benchmark.

answered Jan 5, 2017 at 16:28

AnyWhichWay

7928 silver badges12 bronze badges

Collectives™ on Stack Overflow

for loop vs forEach performance in javascript and credibility of jsperf results

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related