jQuery 1.x vs 2.x (v91)

Revision 91 of this benchmark created on

Preparation HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js">
</script>
<script>
  var jQ1 = jQuery.noConflict();
</script>
<script src="//code.jquery.com/jquery-2.2.0.min.js">
</script>
<script>
  var jQ2 = jQuery.noConflict();
</script>

<div id="idSelector">
</div>
<div class="classSelector">
</div>
<ul id="iteration">
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
</ul>
<div id="cssGetter" style="color: black;">
</div>
<div id="cssSetter" style="color: black;">
</div>
<div id="find">
  <span>
  </span>
  <div>
    <strong>
    </strong>
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
1.x ID Selector
jQ1("#idSelector");
ready
2.x ID Selector
jQ2("#idSelector");
ready
1.x Class Selector
jQ1(".classSelector");
ready
2.x Class Selector
jQ2(".classSelector");
ready
1.x Iteration
jQ1("#iteration li").each(function(i, e) {
  i++;
});
ready
2.x Iteration
jQ2("#iteration li").each(function(i, e) {
  i++;
});
ready
1.x CSS Getter
jQ1("#cssGetter").css("color");
ready
2.x CSS Getter
jQ2("#cssGetter").css("color");
ready
1.x CSS Setter
jQ1("#cssSetter").css("color", "red");
ready
2.x CSS Setter
jQ2("#cssSetter").css("color", "red");
ready
1.x Find
jQ1("#find").find("strong");
ready
2.x Find
jQ2("#find").find("strong");
ready
1.x Non-existent ID
jQ1("#someID");
ready
2.x Non-existent ID
jQ2("#someID");
ready
1.x Non-existent Class
jQ1(".someClass");
ready
2.x Non-existent Class
jQ2(".someClass");
ready
1.x Filter-next-prev
jQ1("#iteration li").filter(":first").next();
jQ1("#iteration li").filter(":last").prev();
ready
2.x Filter-next-prev
jQ2("#iteration li").filter(":first").next();
jQ2("#iteration li").filter(":last").prev();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.