jQuery vs Underscore Each

JavaScript performance comparison

Revision 4 of this test case created by Akos Lukacs

Info

Is jQuery's $.each or Underscore's _.each faster if underscore is going through 53x as many elements?

Would be a fair test, if _(Modernizr), and $(Modernizr) would have the same number of elements...

Check the printed "items in xxx loop:" message...

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//documentcloud.github.com/underscore/underscore-min.js">
</script>
<script src="//www.modernizr.com/downloads/modernizr-2.0.js">
</script>
<div id='len'>
</div>
<hr />
<div id="content">
</div>

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
Underscore.js Each
var $content = $('#content');
var len = 0;
_(Modernizr).each(function(value, property) {
  len++;
  $('<div/>', {
    id: property,
    css: {
      width: '100%'
    },
    html: property + ' ' + value
  }).appendTo($content);
});
if (!window.underscoreMessageSet) {
  window.underscoreMessageSet = true;
  $('#len').append('items in underscore loop: ' + len + '<br />');
}
pending…
jQuery Each
var $content = $('#content');
var len = 0;
$(Modernizr).each(function(property, value) {
  len++;
  $('<div/>', {
    id: property,
    css: {
      width: '100%'
    },
    html: property + ' ' + value
  }).appendTo($content);
});
if (!window.jQueryMessageSet) {
  window.jQueryMessageSet = true;
  $('#len').append('item(s) in jQuery loop: ' + len + '<br />');
}
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