jQuery.each vs. for loop vs Ext.Array.each vs lodash vs while (v189)

Revision 189 of this benchmark created on

Description

Real life Test for common method for looping an array:

  • (native) classic for loop
  • (native) Array.forEach
  • .each from various frameworks: jQuery, Ext, underscore (original & fallback version)
  • emulation: Array.prototype.each
  • lodash.forEach
  • (native) for loop with node
  • for loop 140byt.es version
  • while loop

Array size: 1000 (big array size)

Preparation HTML

<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>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.each
$.each(a, function(index, node) {
 var e = node;
});
ready
for loop
for (var i = 0, len = a.length; i < len; i++) {
 var e = a[i];
};
ready
forEach
a.forEach(function(node, index){
 var e = node;
});
ready
Ext.Array.each
extArrayEach(a, function(index, node) {
 var e = node;
});
ready
Array.prototype.each
a.each(function(node){
  var e = node;
})
ready
_.each
_.each(a, function(node, index){
  var e = node;
})
ready
_.each (fallback)
_.forEach(a, function(node, index){
  var e = node;
})
ready
lodash.forEach
lodash.forEach(a, function(node, index){
    var e = node;
});
ready
for loop with node
for (var i = 0, node; node = a[i++];) {
 var e = node;
};
ready
for loop 140byt.es version
for (var i=a.length;--i in a;) {
  var e = a[i];
}
ready
while loop
var len = a.length;
var i = 0;
while (i < len) {
  var e = a[i++];
}
ready
for loop (without caching the a.length)
for (var i = 0; i < a.length; i++) {
 var e = a[i];
};
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.