Caching jQuery Objects (v20)

Revision 20 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.

(Edited to look at various jQuery-only options)

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
Object Caching
var $myDiv = $("#myDiv");
$myDiv.css("color","red");
$myDiv.css("opacity",1);
$myDiv.css("display","block");
ready

Revisions

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