jQuery Selector Cache (v2)

Revision 2 of this benchmark created by GregWa on


Description

A test to see just how much you'd benefit from caching a selector rather than running it over and over.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="div1">
    <div id="div2">
        <h3 id="h31" class="title">H3</h3>
        <p id="p1" class="description">P</p>
    </div>
</div>
<div id="div3" class="step">
   <form id="form1" action="#">
        <fieldset id="fieldset1">
            <legend id="legend1">Legend</legend>            
            <ol id="ol1">
                <li id="li1">
                    <input id="input1" name="radio1" type="radio" />
                    <label id="label1" class="wide" for="input1">Text</label>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<div id="div1a">
    <div id="div2a">
        <h3 id="h31a" class="title">H3</h3>
        <p id="p1a" class="description">P</p>
    </div>
</div>
<div id="div3a" class="step">
   <form id="form1a" action="#">
        <fieldset id="fieldset1a">
            <legend id="legend1a">Legend</legend>            
            <ol id="ol1a">
                <li id="li1a">
                    <input id="input1a" name="radio1a" type="radio" />
                    <label id="label1a" class="wide" for="input1">Text</label>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<script>
  var result;
  var selectors = ['div1', 'div2', 'h31', 'p1', 'div3', 'form1', 'fieldset1', 'legend1', 'ol1', 'li1', 'input1', 'div1a', 'div2a', 'h31a', 'p1a', 'div3a', 'form1a', 'fieldset1a', 'legend1a', 'ol1a', 'li1a', 'input1a'];
  var obj = {};
  
  var start = 0;
  
  function incrementingSelector() {
   var selector;
   if (start > selectors.length - 1) {
    start = 0;
   }
   selector = selectors[start];
   start++;
  
   return selector;
  }
  
  function randomSelector() {
   return selectors[Math.ceil(Math.random() * selectors.length)];
  }
  
  function cacheSelector(selector) {
   obj[selector] = $('#' + selector);
   return obj[selector];
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Manual Cache Incrementing
var selector = incrementingSelector();
result = obj[selector]
if (!result) {
 obj[selector] = $('#' + selector);
 result = obj[selector];
}
ready
jQuery Auto Cache Incrementing
result = $('#' + incrementingSelector());
ready
jQuery Manual Cache Alternative Incrementing
var selector = incrementingSelector();
result = obj[selector] || cacheSelector(selector);
ready
jQuery Manual Cache Alternative 2 Incrementing
var selector = incrementingSelector();
if (obj[selector]) {
 result = obj[selector];
}
else {
 obj[selector] = $('#' + selector);
 result = obj[selector];
}
ready
jQuery Manual Cache Random
var selector = randomSelector();
result = obj[selector]
if (!result) {
 obj[selector] = $('#' + selector);
 result = obj[selector];
}
ready
jQuery Auto Cache Random
result = $('#' + randomSelector());
ready
jQuery Manual Cache Alternative Random
var selector = randomSelector();
result = obj[selector] || cacheSelector(selector);
ready
jQuery Manual Cache Alternative 2 Incrementing
var selector = randomSelector();
if (obj[selector]) {
 result = obj[selector];
}
else {
 obj[selector] = $('#' + selector);
 result = obj[selector];
}
ready

Revisions

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