Caching jQuery Objects

JavaScript performance comparison

Revision 25 of this test case created by Shawn Terry

Preparation code

<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>
    

Preparation code output

<!--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

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
No Caching
$("#myDiv").css({'color':'red','opacity':'1','display':'block'});
$("#myDiv").attr('data-testcase','No caching');
$("#myDiv").removeClass('doesNotExist').addClass('doesNotExist');
pending…
Object Caching
var jqoMyDiv = $("#myDiv");
jqoMyDiv.css({'color':'red','opacity':'1','display':'block'});
jqoMyDiv.attr('data-testcase','Use caching');
jqoMyDiv.removeClass('doesNotExist').addClass('doesNotExist');
pending…
Object Caching + Chaining
var jqoMyDiv = $("#myDiv");
jqoMyDiv.css({'color':'red','opacity':'1','display':'block'}).attr('data-testcase','Use caching and chaining').removeClass('doesNotExist').addClass('doesNotExist');
pending…

Compare results of other browsers

Revisions

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

0 Comments

Sample DOM

Sample content of non-consequence