Does Array.forEach work faster than the original iteration? How?

Question

http://jsperf.com/testing-foreach-vs-for-loop

It was my understanding that test case 2 should run slower than Test Case 1 - I wanted to see how much slower. Imagine my surprise when I see that it works faster!

What's going on here? Behind the scenes the optimizer? Or is it .forEach cleaner And faster?

Testing in Chrome 18.0.1025.142 32-bit on Windows Server 2008 R2 / 7 64-bit

Answer 1

There are many iteration optimizations that do not have a for loop, for example:

• cache array length
• iteration back
• use counter ++ instead of counter ++

These are the ones that I have heard and used, I am sure that there are more of them. If my memory serves me correctly, the inverse while loop is the fastest of all loops (in most browsers).

For some examples see this jsperf .

Edit: links to postfix vs prefix perf test and iterate back . I could not find my link to use + = 1 instead of ++, so I removed it from the list.

Answer 2

UPDATE:

Many of the old tricks in these answers are great for interpreted JS in older browsers.

In any modern JS implementation, including all modern browsers, Node, and the latest mobile web views, the built-in functions can be actually cached by JIT (JS compiler), which makes Each a much faster option for iterating the array, as a rule. Previously, it was the other way around, when a simple call to a function repeatedly required an extension / break process, which could seriously reduce the performance of a non-trivial cycle.

For maximum performance, I would avoid referring to everything that was not passed as an argument or defined inside the function itself if you do not need it. I am not 100% sure, but I could understand why this is possible.

Getter values ​​that are associated with any kind of search process, such as array length or DOM node properties, are probably also best cached for a variable.

But beyond that, I would just try to let the basic principle avoid work by directing your efforts. A good example of this is to pre-compute things that don't need to be recounted in a loop, or to cache the result of a query selector in var, rather than rummaging through the DOM. Trying too hard to use JIT behavior is likely to become rather cryptic and unlikely to linger over time or in all JITs.

OLD RESPONSE:

Ok, forget the wall of text. Points:

 var i = someArray.length; //length is cached someArray.reverse(); //include this only if iterating in 0-(length-1) order is important while(i--){ //run a test statement on someArray[i]; } 

• the length is cached and immediately converted to an index

• The advantage of reuse in JS AFAIK is to avoid a logical operator with two operands. In this case, we simply evaluate the number. This is true or equal to zero and false.

• I also find it elegant.

Answer 3

Reading length from array at each iteration may be slow, but for each of them it is comonomonically slower because calling a function is not a cheap operation in js.

PS: forEach is 14% slower on FF10.

Answer 4

They are about the same for me in Opera. It should be noted that your conditional argument in for () is array.length. If you cache the length of the array in a variable and then the loop, you should see better performance.

Answer 5

Perhaps for () is slower because the loop applies "array.length" to each iteration to get the length of the array.

Try:

 var nri = array.length; for( var i = 0; i < nri; i++ ){ // ... }