Compare jQuery auto cache vs manual cache

JavaScript performance comparison

Test case created by Puah Hock Leng


Confirm the performance of auto cache vs manual cache.

Preparation code

<script src="">
<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>                
<input class="button" id="traffic_button" type="submit" value="Go" />        

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');
jQuery manual cache
var $active_light = $('#traffic_light input.on');
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
jQuery chaining
$('#traffic_light input.on').css('border', '3px dashed yellow')
        .css('background-color', 'orange')        

Compare results of other browsers


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:


Comment form temporarily disabled.

Add a comment