jQuery cache

JavaScript performance comparison

Test case created by asdluki

Preparation code

<script src="https://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>
    

Preparation code output

<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

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 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);
 }
}
pending…
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);
 }
}
pending…

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

Compare results of other browsers

0 Comments