jQuery cache

Benchmark created by asdluki on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
<ul id="1"></ul>
<ul id="2"></ul>
<ul id="3"></ul>
<ul id="4"></ul>
<ul id="5"></ul>
<ul id="6"></ul>
<ul id="7"></ul>
<ul id="8"></ul>
<ul id="9"></ul>
<ul id="10"></ul>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
No cache
for (var i = 0, max = 30; i < max; i++) {
 for (var j = 1, max1 = 10; j <= max1; j++) {
  jQuery('#' + j).addClass("class-" + i + "-" + j);
 }
}
ready
Cached element
//cache
var cache = {}
cache._cache = {}
cache.elementCache = function(name, selector) {
 if (this._cache[name] === undefined) {
  this._cache[name] = $(selector);
 }
 return this._cache[name];
}

for (var i = 0, max = 30; i < max; i++) {
 for (var j = 1, max1 = 10; j <= max1; j++) {
  var element = cache.elementCache(j, '#' + j);
  element.addClass("class-" + i + "-" + j);
 }
}
ready

Revisions

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