Caching jQuery Objects (v17)

Revision 17 of this benchmark created by Thiago Braga on

Description

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

1) Multiple selectors, multiple statements 2) Single selector, chained statements 3) Cached selector, multiple statements 4) addClass method, with or without caching

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>
<style type="text/css">
  .classTest { color: red; opacity: 1; display: block; }
</style>
<!--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
Normal jQuery
$("#myDiv").css({
  color: "red",
  opacity: 1,
  display: "block"
});
ready
jQuery addClass()
$("#myDiv").addClass('classTest');
ready
jQuery addClass() + Caching
var $myDiv = $("#myDiv");
$myDiv.addClass('classTest');
ready

Revisions

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