each2 vs each vs quickEach

JavaScript performance comparison

Revision 31 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  //each2
  (function($) {

    // Create a placeholder jQuery object with a length of 1. The single item
    // is completely arbitrary and will be replaced.
    var jq = $([1]);

    $.fn.each2 = function(fn) {
      var i = -1;

      while (
      // Set both the first element AND context property of the placeholder
      // jQuery object to the DOM element. When i has been incremented past the
      // end, this[++i] will return undefined and abort the while loop.
      (jq.context = jq[0] = this[++i])

      // Invoke the callback function in the context of the DOM element,
      // passing both the index and the placeholder jQuery object in. Like
      // .each, if the callback returns `false`, abort the while loop.
      && fn.call(jq[0], i, jq) !== false) {}

      // Return the initial jQuery object for chainability.
      return this;
    };

  })(jQuery);

  //quickEach
  (function($) {
    $.fn.quickEach = function(f) {
      var j = $([0]),
          i = -1,
          l = this.length,
          c;
      while (++i < l && (c = j[0] = this[i]) && f.call(j, i, c) !== false);
      return this;
    };
  })(jQuery);

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

Preparation code output

<script> //each2 (function($) { // Create a placeholder jQuery object with a length of 1. The single item // is completely arbitrary and will be replaced. var jq = $([1]); $.fn.each2 = function(fn) { var i = -1; while ( // Set both the first element AND context property of the placeholder // jQuery object to the DOM element. When i has been incremented past the // end, this[++i] will return undefined and abort the while loop. (jq.context = jq[0] = this[++i]) // Invoke the callback function in the context of the DOM element, // passing both the index and the placeholder jQuery object in. Like // .each, if the callback returns `false`, abort the while loop. && fn.call(jq[0], i, jq) !== false) {} // Return the initial jQuery object for chainability. return this; }; })(jQuery); //quickEach (function($) { $.fn.quickEach = function(f) { var j = $([0]), i = -1, l = this.length, c; while (++i < l && (c = j[0] = this[i]) && f.call(j, i, c) !== false); return this; }; })(jQuery); // 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; // jQuery object
  this; // DOM element
});
pending…
jQuery core .each method
elems.each(function(i, elem) {
  $(this); // jQuery object
  this; // DOM element
});
pending…
jQuery quickEach plugin
elems.quickEach(function(i, elem) {
  this; // jQuery object
  elem; // DOM element
});
pending…
assigning variables
elems.quickEach(function(i, elem) {
  var $this = this; // jQuery object
  elem; // DOM element
});
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