CODEWITHSUNDEEP
javascriptgoogle-chromefor-loopforeach
chnging
chnging

Reputation: 775

Chrome for loop optimization

So I was curious what would be faster for iterating through an array, the normal for loop or forEach so I executed this code in the console:

var arr = [];
arr.length = 10000000;
//arr.fill(1);
for (var i_1 = 0; i_1 < arr.length; i_1++) {
arr[i_1] = 1;
}
//////////////////////////////////
var t = new Date();
var sum = 0;
for (var i = 0; i < arr.length; i++) {
    var a = arr[i];
    if (a & 1) {
        sum += a;
    }
    else {
        sum -= a;
    }
}
console.log(new Date().getTime() - t.getTime());
console.log(sum);

t = new Date();
sum = 0;
arr.forEach(function (value, i, aray) {
    var a = value;
    if (a & 1) {
        sum += a;
    }
    else {
        sum -= a;
    }
});
console.log(new Date().getTime() - t.getTime());
console.log(sum);

Now the results in Chrome are 49ms for the for loop, 376ms for the forEach loop. Which is ok but the results in Firefox and IE (and Edge) are a lot different.

In both other browsers the first loop takes ~15 seconds (yes seconds) while the forEach takes "only" ~4 seconds.

My question is can someone tell me the exact reason Chrome is so much faster?

I tried all kinds of operations inside the loops, the results were always in favor for Chrome by a mile.

Upvotes: 8

Views: 1212

Answers (2)

Gary
Gary

Reputation: 2339

For loop is the afastest when compared to other iterators in every browser. But when comparing browsers ie is the slowest in iteration of for loops. Go and try jsperf.com for optimization is going to be my best recommendation. V8 engine implementation is the reason. After chrome split from webkit it stripped off more than 10k line of code in first few days.

Upvotes: 1

Harmen
Harmen

Reputation: 22438

Disclaimer: I do not know the specifics of V8 in Chrome or the interpreter of Firefox / Edge, but there are some very general insights. Since V8 compiles Javascript to native code, let's see what it potentially could do:

  • Very crudely: variables like your var i can be modelled as a very general Javascript variable, so that it can take any type of value from numbers to objects (modelled as a pointer to a struct Variable for instance), or the compiler can deduce the actual type (say an int in C++ for instance) from your JS and compile it like that. The latter uses less memory, exploits caching, uses less indirection, and can potentially be as fast as a for-loop in C++. V8 probably does this.
  • The above holds for your array as well: maybe it compiles to a memory efficient array of ints stored contiguously in memory; maybe it is an array of pointers to general objects.
  • Temporary variables can be removed.
  • The second loop could be optimized by inlining the function call, maybe this is done, maybe it isn't.

The point being: all JS interpreters / compilers can potentially exploit these optimizations. This depends on a lot of factors: the trade-off between compilation and execution time, the way JS is written, etc.

V8 seems to optimize a lot, Firefox / Edge maybe don't in this example. Knowing why precisely requires in-depth understanding of the interpreter / compiler.

Upvotes: 3

Related Questions