minimize jQuery object creation (v11)

Revision 11 of this benchmark created by adardesign on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="appRoot">
  <div class="element1">
    element1
  </div>
  <div class="element2">
    element2
  </div>
  <div class="element3">
    element3
  </div>
  <div class="element4">
    element4
  </div>
  <div class="element5">
    element5 
  </div>
  <div class="element6">
    element6
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
More jQuery objects
$(function() {

  $(".element1").bind("click", function() {
    $(".element2").text("clicked by 1");
  })

  $(".element3").bind("click", function() {
    $(".element1").text("clicked by 3");
  })
  $(".element6").bind("click", function() {
    $(".element1").text("clicked by 3");
  })
  $(".element4").bind("click", function() {
    $(".element5").text("clicked by 4");
  })

  $(".element1").click();
  $(".element2").click();
  $(".element3").click();
  $(".element4").click();
  $(".element5").click();
  $(".element6").click();
});
ready
Less jQuery Objects
$(function() {

  var appRoot = $("#appRoot");


  appRoot.children(".element1").bind("click", function() {
    appRoot.children(".element2").text("clicked by 1");
  })

  appRoot.children(".element3").bind("click", function() {
    appRoot.children(".element1").text("clicked by 3");
  })


  appRoot.children(".element6").bind("click", function() {
    appRoot.children(".element1").text("clicked by 3");
  })


  appRoot.children(".element4").bind("click", function() {
    appRoot.children(".element5").text("clicked by 4");
  })

  $(".element1").click();
  $(".element2").click();
  $(".element3").click();
  $(".element4").click();
  $(".element5").click();
  $(".element6").click();
});
ready
Context
$(function() {

  var appRoot = $("#appRoot");


  $(".element1",appRoot).bind("click", function() {
    $(".element2",appRoot).text("clicked by 1");
  })

  $(".element3",appRoot).bind("click", function() {
    $(".element1",appRoot).text("clicked by 3");
  })


  $(".element6",appRoot).bind("click", function() {
    $(".element1",appRoot).text("clicked by 3");
  })


  $(".element4",appRoot).bind("click", function() {
    $(".element5",appRoot).text("clicked by 4");
  })

  $(".element1",appRoot).click();
  $(".element2",appRoot).click();
  $(".element3",appRoot).click();
  $(".element4",appRoot).click();
  $(".element5",appRoot).click();
  $(".element6",appRoot).click();
});
ready

Revisions

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