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

JavaScript performance comparison

Revision 143 of this test case created by Jacky

Info

Real life Test for common method for looping an array:

Array size: 100 (common 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 = 100; 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…

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