Fastest array loops in Javascript

JavaScript performance comparison

Revision 122 of this test case created by Misko Hevery

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 src="//code.jquery.com/jquery-git2.min.js"></script>
<script>
Benchmark.prototype.setup = function() {
    // Populate the base array
    var arr = [];
    for (var i = 0; i < 20; i++) {
      arr[i] = (Math.random() * 1000 |0);
    }
   
    function someFn(ix) {
      return ix << 1;
    }
    var len = arr.length, i = 0, arr2 = arr.slice();
};

Benchmark.prototype.teardown = function() {
    i = 0; // reset counters if modified
    arr = arr2.slice(); // repopulate by copying back
};
</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 count = 0;
for (var i = 0; i < arr.length; i++) {
  count += arr[i];
}
return count;
pending…
While loop, basic
var count = 0;
while (i < len) {
  count += arr[i];
  i++;
}
return count;
pending…
For loop, cached+init
var count = 0;
for (var i = 0; i < len; i++) {
  count += arr[i];
}
return count;
pending…
For loop, i--
var count = 0;
for (var i = len; i > 0; i--) {
  count += arr[i];
}
return count;
pending…
Do-while loop, i--
var count = 0;
var i = len - 1;
do {
  count += arr[i];
} while (i--);
return count;
pending…
Do-while loop, --i
var count = 0;
var i = len;
if (i > 0) {
  do {
    count += arr[i];
  }
  while (--i);
}
return count;
pending…
For..in loop
var count = 0;
for (var i in arr) {
  count += arr[i];
}
return count;
pending…
shift 1
var count = 0;
while (i = arr.shift()) {
  count += arr[i];
}
return count;
pending…
forEach
var count = 0;
arr.forEach(function(i) {
  count += i;
});
return count;
pending…
shift 2
var count = 0;
while ((i = arr.shift()) !== undefined) {
  count += arr[i];
}
return count;
pending…
While ! Undefined
var count = 0;
var a;
while ((a = arr[i++]) !== undefined) {
  count += arr[a];
}
return count;
pending…
Pop
var count = 0;
while ((i = arr.pop()) !== undefined) {
  count += arr[i];
}
return count;
pending…
Order w/ array copy
var count = 0;
var copy = arr.slice(0);
while (i = copy.shift()) {
  count += arr[i];
}
return count;
pending…
While length--
var count = 0;
var l = len;
while (l--) {
  count += arr[l];
}
return count;
pending…
pop2
var count = 0;
var i = arr.pop();
while (i !== undefined) {
  count += arr[i];
  i = arr.pop();
}
return count;
pending…
non-init for
var i;
var count = 0;
for (; i < len; ++i) {
  count += arr[i];
}
return count;
pending…
Object.keys
var count = 0;
Object.keys(arr).forEach(function(i) {
        count += arr[i];
});
return count;
pending…
while non cached len
var i;
var count = 0;
while (i < arr.length) {
  count += arr[i];
  i++;
}
return count;
pending…
while obj.keys.length
var count = 0;
var i = Object.keys(arr).length;
while (i--) {
  count += arr[i];
}
return count;
pending…
jQuery
var count = 0;
$.each(arr, function(index, value) {
 count += value;
});
return count;
pending…
pop3
var count = 0;
while (i = arr.pop()) {
  count += arr[i];
}
return count;
pending…
shift 3
var count = 0;
var i = arr.shift();
while (i !== undefined) {
  count += i;
  i = arr.shift();
}
return count;
pending…
noncached inline while
var count = 0;
while (i++ < arr.length) {
  count += arr[i];
}
return count;
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