Compare jQuery auto cache vs manual cache

JavaScript performance comparison

Revision 2 of this test case created by VR

Info

Confirm the performance of auto cache vs manual cache.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
</script>
<div id="content">
  <form method="post" action="/">
    <h2>
      Traffic Light
    </h2>
    <ul id="traffic_light">
      <li>
        <input type="radio" class="on" name="light" value="red" />
        Red
      </li>
      <li>
        <input type="radio" class="off" name="light" value="yellow" />
        Yellow
      </li>
      <li>
        <input type="radio" class="off" name="light" value="green" />
        Green
      </li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
  </form>
</div>

Preparation code output

Traffic Light

  • Red
  • Yellow
  • Green

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery auto cache
$('#traffic_light input.on').css('border', '3px dashed yellow');
$('#traffic_light input.on').css('background-color', 'orange');
$('#traffic_light input.on').fadeIn('slow');
pending…
jQuery manual cache
var $active_light = $('#traffic_light input.on');
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');
pending…
jQuery chaining
$('#traffic_light input.on').css('border', '3px dashed yellow').css('background-color', 'orange').fadeIn('slow');
pending…
jQuery Manual Cache + Chaining
var $active_light = $('#traffic_light input.on');
$active_light.css('border', '3px dashed yellow').css('background-color', 'orange').fadeIn('slow');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment