As part of exploring JavaScript performance, I started wondering if the particular method of looping made a difference to performance. After all, one of the most often repeated bits of advice is that JavaScript is much faster if you loop backwards through an array instead of forwards and the slow part of my code was a loop. Using jsperf.com I could set up a simple test case pretty quickly and easily: for vs forEach.

There are a bunch of variants on loops in that test and the results really surprised me:

<th id="id_58746" valign="bottom">
  for loop, cached length
</th>

<th id="id_58747" valign="bottom">
  for loop, cached length, no callback
</th>

<th id="id_58748" valign="bottom">
  for loop, cached length, using function.call
</th>

<th id="id_58749" valign="bottom">
  for loop, reverse
</th>

<th id="id_58750" valign="bottom">
  for loop, simple
</th>

<th id="id_58751" valign="bottom">
  forEach
</th>

<th id="id_58752" valign="bottom">
  # Tests
</th>

<td headers="id_58746,id_58753" valign="middle">
  4000
</td>

<td headers="id_58747,id_58753" valign="middle">
  4531
</td>

<td headers="id_58748,id_58753" valign="middle">
  2184
</td>

<td headers="id_58749,id_58753" valign="middle">
  3804
</td>

<td headers="id_58750,id_58753" valign="middle">
  3333
</td>

<td headers="id_58751,id_58753" valign="middle">
  2998
</td>

<td headers="id_58752,id_58753" valign="middle">
  8
</td>

<td headers="id_58746,id_58754" valign="middle">
  6928
</td>

<td headers="id_58747,id_58754" valign="middle">
  7676
</td>

<td headers="id_58748,id_58754" valign="middle">
  4499
</td>

<td headers="id_58749,id_58754" valign="middle">
  8192
</td>

<td headers="id_58750,id_58754" valign="middle">
  7211
</td>

<td headers="id_58751,id_58754" valign="middle">
  450
</td>

<td headers="id_58752,id_58754" valign="middle">
  6
</td>

<td headers="id_58746,id_58755" valign="middle">
  82
</td>

<td headers="id_58747,id_58755" valign="middle">
  95
</td>

<td headers="id_58748,id_58755" valign="middle">
  69
</td>

<td headers="id_58749,id_58755" valign="middle">
  77
</td>

<td headers="id_58750,id_58755" valign="middle">
  71
</td>

<td headers="id_58751,id_58755" valign="middle">
  103
</td>

<td headers="id_58752,id_58755" valign="middle">
  1
</td>

<td headers="id_58746,id_58756" valign="middle">
  87
</td>

<td headers="id_58747,id_58756" valign="middle">
  111
</td>

<td headers="id_58748,id_58756" valign="middle">
  70
</td>

<td headers="id_58749,id_58756" valign="middle">
  88
</td>

<td headers="id_58750,id_58756" valign="middle">
  84
</td>

<td headers="id_58751,id_58756" valign="middle">
  119
</td>

<td headers="id_58752,id_58756" valign="middle">
  1
</td>

<td headers="id_58746,id_58758" valign="middle">
  3382
</td>

<td headers="id_58747,id_58758" valign="middle">
  5029
</td>

<td headers="id_58748,id_58758" valign="middle">
  1816
</td>

<td headers="id_58749,id_58758" valign="middle">
  3678
</td>

<td headers="id_58750,id_58758" valign="middle">
  3122
</td>

<td headers="id_58751,id_58758" valign="middle">
  1942
</td>

<td headers="id_58752,id_58758" valign="middle">
  4
</td>

Browser
Chrome
Firefox
iPad
iPhone
Safari

Here’s that data in a graph for Chome and Firefox just to make it a bit easier to visualise:

Unsurprisingly, the performance characteristics vary quite noticeably between browsers. What was surprising to me at least was that the new [].forEach() is one of or the slowest method to iterate through an array – slower than implementing forEach yourself in JavaScript in most browsers (mobile Safari being the exception).

The other thing that stood out is that green bar in the middle, representing the ‘for loop, cached length using function.call’ which is the current method of looping I’m using because that what the libraries implement. The advantage of this approach is that it not only supplies each item in the array, it also gives the index and the full array as extra arguments and it allows me to specify an object to use for ‘this’ in the callback function. That’s all potentially very handy but I wasn’t actually taking advantage of it. Looks like switching to a custom ‘each’ implementation which uses the for loop with cached length approach should give a performance boost without making any other changes to the code so no sacrifice in maintainability.

Sounds great, but after making the change there was less than a millisecond difference in the actual performance – well within the margin for error for measuring time in JavaScript performance tests.

Lessons Learnt

• Use whatever for loop setup you want – it’s unlikely to affect overall performance in any noticeable way.
• It’s probably not worth adding code to detect if there’s a built-in forEach you can leverage – just use the JavaScript implementation you’d need on older browsers anyway.

The Remaining Question

It’s all very well to learn these lessons, but since I’ve done all of this playing around in my own time at home, there’s a very significant problem with the results: they don’t include IE1{#footlink1:1286622982581.footnote}. Since my real performance problems are worst on IE 6,7 and 8, I need to be running these tests there – it’s possible that changing the looping system really would yield performance gains in IE. I’ll have to try that out on Monday.

1 – I do have IE in a VM I’ve just been too lazy to fire it up. Of course, if you happen have IE ready to hand, you can go and run the tests yourself and jsperf.com will add that into the mix ↩