Browser Diet - jQuery.each vs. for loop

JavaScript performance comparison

Revision 47 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js">
</script>
<script>
  var a = $('*').get(),
      e, breaker = {};



var myEach = function(obj, iterator, context) {
  if (obj == null) return obj;
  if (obj.length === +obj.length) {
    for (var i = 0, length = obj.length; i < length; i++) {
      if (iterator.call(context, obj[i], i, obj) === breaker) return;
    }
  } else {
    var keys = _.keys(obj);
    for (var i = 0, length = keys.length; i < length; i++) {
      if (iterator.call(context, obj[keys[i]], keys[i], obj) === breaker) return;
    }
  }
  return obj;
};


var myEachSmartContext = function(obj, iterator, context) {
  if (context) {
    return myEach(obj, iterator, context);
  }

  if (obj == null) return obj;
  if (obj.length === +obj.length) {
    for (var i = 0, length = obj.length; i < length; i++) {
      if (iterator(obj[i], i, obj) === breaker) return;
    }
  } else {
    var keys = _.keys(obj);
    for (var i = 0, length = keys.length; i < length; i++) {
      if (iterator(context, obj[keys[i]], keys[i], obj) === breaker) return;
    }
  }
  return obj;
};
</script>
    

Preparation code output

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"> </script> <script> var a = $('*').get(), e, breaker = {}; var myEach = function(obj, iterator, context) { if (obj == null) return obj; if (obj.length === +obj.length) { for (var i = 0, length = obj.length; i < length; i++) { if (iterator.call(context, obj[i], i, obj) === breaker) return; } } else { var keys = _.keys(obj); for (var i = 0, length = keys.length; i < length; i++) { if (iterator.call(context, obj[keys[i]], keys[i], obj) === breaker) return; } } return obj; }; var myEachSmartContext = function(obj, iterator, context) { if (context) { return myEach(obj, iterator, context); } if (obj == null) return obj; if (obj.length === +obj.length) { for (var i = 0, length = obj.length; i < length; i++) { if (iterator(obj[i], i, obj) === breaker) return; } } else { var keys = _.keys(obj); for (var i = 0, length = keys.length; i < length; i++) { if (iterator(context, obj[keys[i]], keys[i], obj) === breaker) return; } } return obj; }; </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
jQuery.each
$.each(a, function() { e = this; })
pending…
for loop
for (var i = 0, len = a.length; i < len; i++) { e = a[i]; }
pending…
native forEach
a.forEach(function(elem) { e = elem; })
pending…
native forEach (right args)
a.forEach(function(elem, e_i, e_a) { e = elem; })
pending…
no context underscore
myEachSmartContext(a, function(elem, e_i, e_a) { e = elem; })
pending…
non-native underscore
myEach(a, function(elem, e_i, e_a) { e = elem; })
pending…
underscore.each
_.each(a, function (elem, e_i, e_a) { e = elem });
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