Caching jQuery Objects

JavaScript performance comparison

Revision 13 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<!--Sample DOM-->
<header>
  <h1>
    Sample DOM
  </h1>
</header>
<nav>
  <ul>
    <li>
      Item 1
    </li>
    <li>
      Item 2
    </li>
    <li>
      Item 3
    </li>
  </ul>
</nav>
<div id="main">
  <div id="content">
    <div class="myClass">
      <p>
        Sample content of non-consequence
      </p>
    </div>
    <div class="myClass">
      <p>
        Sample content of non-consequence
      </p>
    </div>
    <div class="myClass">
      <p>
        Sample content of non-consequence
      </p>
    </div>
    <div class="myClass">
      <p>
        Sample content of non-consequence
      </p>
    </div>
  </div>
</div>
<footer>
  <a href="#">Terms</a>
</footer>
    

Preparation code output

<!--Sample DOM--> <header> <h1> Sample DOM </h1> </header> <nav> <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> </nav> <div id="main"> <div id="content"> <div class="myClass"> <p> Sample content of non-consequence </p> </div> <div class="myClass"> <p> Sample content of non-consequence </p> </div> <div class="myClass"> <p> Sample content of non-consequence </p> </div> <div class="myClass"> <p> Sample content of non-consequence </p> </div> </div> </div> <footer> <a href="#">Terms</a> </footer>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
No Caching
$(".myClass").css("color", "red");
$(".myClass").css("opacity", 1);
$(".myClass").css("display", "block");
pending…
Method Chaining
$(".myClass").css("color", "red").css("opacity", 1).css("display", "block");
pending…
Object Caching
var $myDiv = $(".myDiv");
$myDiv.css("color", "red");
$myDiv.css("opacity", 1);
$myDiv.css("display", "block");
pending…
Object Caching + Chaining
var $myDiv = $(".myClass");
$myDiv.css("color", "red").css("opacity", 1).css("display", "block");
pending…
normal jquery
$(".myClass").css({
  color: "red",
  opacity: 1,
  display: "block"
});
pending…

Compare results of other browsers

Revisions

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

0 Comments

Sample DOM

Sample content of non-consequence

Sample content of non-consequence

Sample content of non-consequence

Sample content of non-consequence