jQuery Variable Caching (v2)

Revision 2 of this benchmark created on

Description

Testing the performance of caching jQuery objects vs. using jQuery selectors to access the DOM repeatedly.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<section>
  <h1>
    Testing jQuery Variable Caching
  </h1>
  <p>
    Testing the performance of caching jQuery objects vs. using jQuery selectors to
    access the DOM repeatedly.
  </p>
  <ul>
    <li class="item">
      List Item
    </li>
    <li class="item">
      List Item
    </li>
    <li class="item">
      List Item
    </li>
    <li class="item">
      List Item
    </li>
  </ul>
</section>

Test runner

Ready to run.

Testing in
TestOps/sec
Not using cached variables
for (var i = 100; i--;) {
  $('.item').html('Item ' + i);
}
ready
Using cached variables
var $list = $('.item');
for (var i = 100; i--;) {
  $list.html('Item ' + i);
}
ready
Not using cached variables(while)
var i = 100;
while (i--) {
  $('.item').html('Item ' + i);
}
ready
Using cached variables(while)
var i = 100,
    $list = $('.item');
while (i--) {
  $list.html('Item ' + i);
}
ready
Using cached variables2(while)
var i = 100,
    $list = $('.item');
while (i--) {
  $list[0].innerHTML='Item ' + i;
}
ready

Revisions

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