iterator, forLoop, forEach, each, for as, for in

JavaScript performance comparison

Revision 468 of this test case created by

Preparation code

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
  var values = [];

  for (var i = 0; i < 10000; i++) {
   values[i] = i;
  }
</script>
      
<script>
Benchmark.prototype.setup = function() {
    var sum = 0;
  
    function add(val) {
      sum += val;
    }
  
    function iterateForward(array, delegate) {
      var length = array.length;
      for (var i = 0; i < length; i++) {
        delegate(array[i]);
      }
    }
  
    function iterateForwardPassback(array, delegate) {
      var length = array.length;
      for (var i = 0; i < length; i++) {
        delegate(array[i], i, array);
      }
    }
  
  
    function iterateBackward(array, delegate) {
      for (var i = array.length; i > 0; --i) {
        delegate(array[i]);
      }
    }

};
</script>

Preparation code output

<script> var values = []; for (var i = 0; i < 10000; i++) { values[i] = i; } </script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
1: iterateForward
//appears to be significantly faster than any other alternative...
iterateForward(values, add);
pending…
2: iterateForward, passback
//Here the index and array get passed back in addition to the element.
iterateForwardPassback(values, add);
pending…
3: iterateBackward
//This should prove that it doesn't matter if you go forwards or backwards,
// as long as you aren't performing a calculation in the loop comparison.
// Essentially, it's like a cached value if you're not doing a calculation every iteration. 
iterateBackward(values, add);
pending…
4: for loop, forward
//Should compare against iterateForward. 
for (var i = 0; i < values.length; i++) {
  add(values[i]);
}
pending…
5: for loop, forward, let
//Does let impact performance? 
for (let i = 0; i < values.length; i++) {
  add(values[i]);
}
pending…
6: for loop, reverse
//Using let in the forward iterator lowers the performance to the reverse iterators level.
//Yes, the reverse iterator seems to be slower than forwards. 
for (var i = values.length; i >= 0; --i) {
    add(values[i]);
}
pending…
7: [].forEach
//Built in native iterator called directly on object. 
values.forEach(add);
pending…
8: Jquery.each
$.each(values,add);
pending…
9: Jquery.each, anon
//This tests creates an anon function for each element instead of calling add directly.   
$.each(values, function(index) {
  add(values[index]);
});
pending…
a: $(arr).each
//Calls add directly but wraps the array element first. 
$(values).each(add);
pending…
b: for of
//I did not expect this to be faster than for in. 
for (var i of values) {
  add(values[i]);
}
pending…
c: for in
//This is abysmal and commonly used. 
for (var i in values) {
  add(values[i]);
}
pending…
d: for in hasProp
//How bad can it get?
for (var i in values) {
    if ( values.hasOwnProperty(i) ) {
        add(values[i]);
    }
}
pending…
e: iterateForwardAnon
//this seems to consistently be the fastest, i want to see how it does with an anon function.
iterateForward(values, function(x){
    add(x);
});
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.

0 Comments