Fastest array loops in Javascript

JavaScript performance comparison

Revision 167 of this test case created

Info

Testing the best overall performers (across both desktop and mobile) from these jsperf tests:

Caching array length

Different kinds of loop

Interestingly, it would seem that current 2012 browsers have all optimized their Javascript engines for basic for and while loop syntax. This means we can probably abandon all the 'trick' loops (that used to run faster) and just go with whatever loop syntax we find the most readable.

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    // Populate the base array
   
   
    function someFn(ix) {
      return ix * 5 + 1 / 3 * 8;
    }
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
For loop, basic
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
for (var i = 0; i < arr.length; i++) {
  someFn(arr[i]);
}
pending…
While loop, basic
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
var i = 0;
while (i < arr.length) {
  someFn(arr[i]);
  i++;
}
pending…
For loop, cached
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
for (var i = 0, len = arr.length; i < len; i++) {
  someFn(arr[i]);
}
pending…
For loop, i--
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
for (var i = arr.length; i > 0; i--) {
  someFn(arr[i]);
}
pending…
Do-while loop, i--
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
var i = arr.length - 1;
do {
  someFn(arr[i]);
}
while (i--);
pending…
Do-while loop, --i
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
var i = arr.length;
if (i > 0) {
  do {
    someFn(arr[i]);
  }
  while (--i);
}
pending…
For..in loop
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
for (var i in arr) {
  someFn(arr[i]);
}
pending…
Order
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
while (i = arr.shift()) {
  someFn(i);
}
pending…
forEach
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
arr.forEach(function(v) {
  someFn(v)
})
pending…
order validation
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
while ((i = arr.shift()) !== undefined) {
  someFn(i);
}
pending…
While ! Undefined
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
var a;
while ((a = arr[i++]) !== undefined) {
  someFn(a);
}
pending…
Pop
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
while (i = arr.pop()) {
  someFn(i);
  newArr.push(i);
}
pending…
Order w/ array copy
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
var copy = arr.slice(0);
while (i = copy.shift()) {
  someFn(i);
}
pending…
Pop w/ reverse()
var arr = [],
  newArr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
arr.reverse();
while (i = arr.pop()) {
  someFn(i);
  newArr.push(i);
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment