minimize jQuery object creation (v14)

Revision 14 of this benchmark created by Dave Hansen-Lange on

Description

compares performance of $('selector') $('selector', context) $(context).find('selector') $(context).children('selector')

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>
<div id="junk1">
  <div class="other1">
    other1
  </div>
  <div class="other2">
    other2
  </div>
  <div class="other3">
    other3
  </div>
  <div class="other4">
    other4
  </div>
  <div class="other5">
    other5 
  </div>
  <div class="other6">
    other6
  </div>
</div>
<div id="junk2">
  <div class="other1">
    other1
  </div>
  <div class="other2">
    other2
  </div>
  <div class="other3">
    other3
  </div>
  <div class="other4">
    other4
  </div>
  <div class="other5">
    other5 
  </div>
  <div class="other6">
    other6
  </div>
</div>
<div id="junk3">
  <div class="other1">
    other1
  </div>
  <div class="other2">
    other2
  </div>
  <div class="other3">
    other3
  </div>
  <div class="other4">
    other4
  </div>
  <div class="other5">
    other5 
  </div>
  <div class="other6">
    other6
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
plain selector
$(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
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 6");
  });

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

  $(".element1").click();
  $(".element2").click();
  $(".element3").click();
  $(".element4").click();
  $(".element5").click();
  $(".element6").click();

});
ready
.find()
$(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 6");
  });

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

  $(".element1").click();
  $(".element2").click();
  $(".element3").click();
  $(".element4").click();
  $(".element5").click();
  $(".element6").click();

});
ready
.children()
$(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 6");
  });

  $(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

Revisions

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