Caching jQuery Objects (v11)

Revision 11 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
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
jQuery using object.
$("#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.