minimize jQuery object creation

Benchmark created by adardesign on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="appRoot">
  <div id="element1">
    element1
  </div>
  <div id="element2">
    element2
  </div>
  <div id="element3">
    element3
  </div>
  <div id="element4">
    element4
  </div>
  <div id="element5">
    element5
  </div>
  <div id="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.find("#element1").bind("click", function() {
    appRoot.find("#element2").text("clicked by 1");
  })

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


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


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

  appRoot.find("#element1").click();
  appRoot.find("#element2").click();
  appRoot.find("#element3").click();
  appRoot.find("#element4").click();
  appRoot.find("#element5").click();
  appRoot.find("#element6").click();
});
ready

Revisions

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