Caching jQuery Objects (v27)

Revision 27 of this benchmark created on

Preparation HTML

<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 id="myDiv" class="myClass">
  <p>Sample content of non-consequence</p>
  </div>
  </div>
</div>
<footer>
<a href="#">Terms</a>
</footer>

Test runner

Ready to run.

Testing in
TestOps/sec
No Caching
$("#myDiv").css("color","red");
$("#myDiv").css("opacity",1);
$("#myDiv").css("display","block");
ready
Method Chaining
$("#myDiv").css("color","red").css("opacity",1).css("display","block");
ready
Object Caching
var $myDiv = $("#myDiv");
$myDiv.css("color","red");
$myDiv.css("opacity",1);
$myDiv.css("display","block");
ready
Object Caching + Chaining
var $myDiv = $("#myDiv");
$myDiv.css("color","red").css("opacity",1).css("display","block");
ready
Use .css() passing object literal
$("#myDiv").css({
   color: "red",
   opacity: 1,
   display: "block"
});
ready

Revisions

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