Caching jQuery Objects (v10)

Revision 10 of this benchmark created by Ray Baker 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
Object caching + css object
 
ready

Revisions

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