Caching jQuery Objects (v26)

Revision 26 of this benchmark created on

Description

This test compares the performance impact of three different jQuery scenarios:

1) Multiple selectors, multiple statements 2) Single selector, chained statements 3) Cached selector, multiple statements

The goal is to identify the best way to handle jQuery selectors for optimum performance.

Preparation HTML

<script src="//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
No jQuery
var myDiv = document.getElementById("myDiv");
myDiv.style.color = "red";
myDiv.style.opacity = 1;
myDiv.style.display = "block";
ready
No jQuery (cssText)
var myDiv = document.getElementById("myDiv"),
    styles = ";color:red;opacity:1;display:block;";
myDiv.style.cssText += styles;
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.