minimize jQuery object creation (v10)

Revision 10 of this benchmark created 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>

<div id="aaaaa">
  <div class="aaaaa1">
    element1
  </div>
  <div class="aaaaa2">
    element2
  </div>
  <div class="aaaaa3">
    element3
  </div>
  <div class="aaaaa4">
    element4
  </div>
  <div class="aaaaa5">
    element5 
  </div>
  <div class="aaaaa6">
    element6
  </div>
</div>


<div id="bbbbb">
  <div class="bbbbb1">
    element1
  </div>
  <div class="bbbbb2">
    element2
  </div>
  <div class="bbbbb3">
    element3
  </div>
  <div class="bbbbb4">
    element4
  </div>
  <div class="bbbbb5">
    element5 
  </div>
  <div class="bbbbb6">
    element6
  </div>
</div>

      <div id="header">
            <div id="portalLink">
                <a class="genu" href="http://stackexchange.com" onclick="StackExchange.ready(function(){genuwine.click();});return false;">Stack Exchange</a>
            </div>
            <div id="topbar">
                <div id="hlinks">
                    <span id="hlinks-user">
                  <span class="profile-triangle">&#9662;</span><a href="/users/459688/amosrivera" class="profile-link">amosrivera</a>&nbsp;<a href="/users/459688/amosrivera?tab=reputation"><span class="reputation-score" title="your reputation; view reputation changes">3,768</span></a><span title="2 silver badges"><span class="badge2"></span><span class="badgecount">2</span></span><span title="17 bronze badges"><span class="badge3"></span><span class="badgecount">17</span></span>
 <span class="lsep">|</span>

                  </span>
                  <span id="hlinks-nav">
                  <a href="/review/">review</a>
 <span class="lsep">|</span>

                  </span>
                  <span id="hlinks-custom">
                  <a href="http://chat.stackoverflow.com">chat</a>
 <span class="lsep">|</span>
<a href="http://meta.stackoverflow.com">meta</a>
 <span class="lsep">|</span>
<a href="/about">about</a>
 <span class="lsep">|</span>
<a href="/faq">faq</a>
                  </span>
                </div>
                <div id="hsearch">
                    <form id="search" action="/search" method="get">
                    <div>
                        <input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="140" size="28" value="search">
                    </div>
                    </form>
                </div>
            </div>
            <br class="cbt">
            <div id="hlogo">
                <a href="/">Stack Overflow</a>
            </div>
            <div id="hmenus">
                <div class="nav mainnavs">
                    <ul>
                        <li><a id="nav-questions" href="/questions">Questions</a></li>
                        <li><a id="nav-tags" href="/tags">Tags</a></li>
                        <li><a id="nav-users" href="/users">Users</a></li>
                        <li><a id="nav-badges" href="/badges">Badges</a></li>
                        <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li>
                    </ul>
                </div>
                <div class="nav askquestion">
                    <ul>
                        <li>
                            <a id="nav-askquestion"  href="/questions/ask">Ask Question</a>
                        </li>
                    </ul>
                </div>
            </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.