Caching jQuery Results

Benchmark created on March 8, 2011

Description

Preparation HTML

<form id="form" action="">
  <div id="firstNameWrapper">
    <div><label for="firstName">First Name</label></div>
    <div><input type="text" id="firstName" name="firstName"></div>
  </div>
  <div id="lastNameWrapper">
    <div><label for="lastName">Last Name</label></div>
    <div><input type="text" id="lastName" name="lastName"></div>
  </div>
  <div id="mailListsWrapper">
    <div>Mailing Lists</div>
    <div>
      <label><input type="checkbox" id="mailingListOne" name="mailingListOne" class="mailingList" value="1"> One</label>
    </div>
    <div>
      <label><input type="checkbox" id="mailingListTwo" name="mailingListTwo" class="mailingList" value="1"> Two</label>
    </div>
    <div>
      <label><input type="checkbox" id="mailingListThree" name="mailingListThree" class="mailingList" value="1"> Three</label>
    </div>
  </div>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
  var cache = {
   $mailingLists: $('.mailingList')
  };
  
  function notCached() {
   var $firstName = $('#firstName'),
       $lastName = $('#lastName'),
       $mailingLists = $('.mailingList:checked');
  }
  
  function cached() {
   var $checkedLists = cache.$mailingLists.filter(':checked');
  }
</script>

Test runner

notCached();

cached();

Revisions

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

• Revision 1: published on March 8, 2011