jQuery.each vs. for loop vs Ext.Array.each vs lodash vs while

JavaScript performance comparison

Revision 189 of this test case created

Info

Real life Test for common method for looping an array:

Array size: 1000 (big array size)

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js">
</script>
<script src="https://raw.github.com/bestiejs/lodash/v0.8.2/lodash.min.js"></script>
<script>var lodash = _.noConflict(); </script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js">

</script>
<script>
  $.fn.forEach = Array.prototype.forEach;
  var extArrayEach = Ext.Array.each;
  Array.prototype.each = function(func){
      var array = this, 
          i = 0, 
          l = array.length;
      while(i < l) func(array[i], i, array), i++;
      return array
    };
 var breaker = {};
  _.forEach = function(obj, iterator, context) {
    if (obj == null) return;
    if (obj.length === +obj.length) {
      for (var i = 0, l = obj.length; i < l; i++) {
        if (iterator.call(context, obj[i], i, obj) === breaker) return;
      }
    } else {
      for (var key in obj) {
        if (_.has(obj, key)) {
          if (iterator.call(context, obj[key], key, obj) === breaker) return;
        }
      }
    }
  };
  //a static array.
  var a = [];
  for (var i = 0, len = 1000; i < len; i++) {
    a[i] = i + "";
  }
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery.each
 
$.each(a, function(index, node) {
 var e = node;
});
 pending…
for loop
 
for (var i = 0, len = a.length; i < len; i++) {
 var e = a[i];
};
 pending…
forEach
 
a.forEach(function(node, index){
 var e = node;
});
 pending…
Ext.Array.each
 
extArrayEach(a, function(index, node) {
 var e = node;
});
 pending…
Array.prototype.each
 
a.each(function(node){
  var e = node;
})
 pending…
_.each
 
_.each(a, function(node, index){
  var e = node;
})
 pending…
_.each (fallback)
 
_.forEach(a, function(node, index){
  var e = node;
})
 pending…
lodash.forEach
 
lodash.forEach(a, function(node, index){
    var e = node;
});
 pending…
for loop with node
 
for (var i = 0, node; node = a[i++];) {
 var e = node;
};
 pending…
for loop 140byt.es version
 
for (var i=a.length;--i in a;) {
  var e = a[i];
}
 pending…
while loop
 
var len = a.length;
var i = 0;
while (i < len) {
  var e = a[i++];
}
 pending…
for loop (without caching the a.length)
 
for (var i = 0; i < a.length; i++) {
 var e = a[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