jQuery each2 plugin vs jQuery core .each method

JavaScript performance comparison

Revision 18 of this test case created by Jason DiMeo

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- the plugin -->
<script src="http://github.com/cowboy/jquery-misc/raw/master/jquery.ba-each2.js"></script>

<script>
  jQuery.fn.extend({
    each$: function(fn) {
      var $elem = jQuery([1]);
      try {
        for (var i = 0; i < this.length; i++) {
          if (fn.call(jQuery.context = $elem[0] = this[i], i, $elem) === false) { break; }
	}
      } finally {
	delete $elem[0];
      }
      return this;
    }
  });

  // Create a whole bunch of elements for iteration.
  var elems = $('<div/>').append(Array(1000).join('<span/>')).children();
</script>
    

Preparation code output

<!-- the plugin --> <script src="http://github.com/cowboy/jquery-misc/raw/master/jquery.ba-each2.js"></script> <script> jQuery.fn.extend({ each$: function(fn) { var $elem = jQuery([1]); try { for (var i = 0; i < this.length; i++) { if (fn.call(jQuery.context = $elem[0] = this[i], i, $elem) === false) { break; } } } finally { delete $elem[0]; } return this; } }); // Create a whole bunch of elements for iteration. var elems = $('<div/>').append(Array(1000).join('<span/>')).children(); </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 each2 plugin
elems.each2(function(i, jq) {
 jq; // Use at will!
 jq; // No performance penalty.
 jq; // No performance penalty.
});
pending…
jQuery core .each method
elems.each(function(i, elem) {
 var jq = $(this); // This is the best we can do here.
 jq; // No performance penalty.
 jq; // No performance penalty.
 jq; // No performance penalty.
});
pending…
jQuery core .each, $(this) x 2
elems.each(function(i, elem) {
 $(this); // Really inefficient code, you know,
 $(this); // like you see all over the web...
});
pending…
jQuery core .each, $(this) x 4
elems.each(function(i, elem) {
 $(this); // Really inefficient code, you know,
 $(this); // like you see all over the web...
 $(this); // Etc...
 $(this); // Etc...
});
pending…
jQuery core .each, $(this) x 10
elems.each(function(i, elem) {
 for (var i = 0; i < 10; i++) {
  $(this); // Let's see the cost of doing $(this) 10x.
 }
});
pending…
Putting things into perspective...
elems.each2(function(i, jq) {
 // This should give some sense of how disproportionate the
 // $(this) savings are compared to actual DOM manipulations.
 jq.addClass('foo');
});
pending…
jQuery .each$ plugin
elems.each$(function(i, $elem) {
 $elem; // Use at will!
 $elem; // No performance penalty.
 $elem; // No performance penalty.
});
pending…
Putting things into perspective... with .each$ plugin
elems.each$(function(i, $elem) {
 // This should give some sense of how disproportionate the
 // $(this) savings are compared to actual DOM manipulations.
 $elem.addClass('foo');
});
pending…
Putting things into perspective... with jQuery core .each
elems.each(function(i, elem) {
 var $elem = jQuery(this);
 // Should be super slow!
 $elem.addClass('foo');
});
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