Compare jQuery auto cache vs manual cache

JavaScript performance comparison

Test case created by Puah Hock Leng

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…

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