jQuery cache vs no cache

Benchmark created by EtnasSoft on

Preparation HTML

<div id="foo"></div>
<div id="bar<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Cache no chain
$( function () {
  var foo = $( '#foo' ),
      bar = $( '#bar' );

  foo.addClass( 'my-class' );
  foo.css( 'background-color', '#000' );
  foo.width( '100' );
  foo.height( '100' );

  bar.addClass( 'my-class-2' );
  bar.css( 'background-color', '#F00' );
  bar.width( '200' );
  bar.height( '200' );
} );
ready
jQuery Cache chain
$( function () {
  var foo = $( '#foo' ),
      bar = $( '#bar' );

  foo.addClass( 'my-class' )
      .css( 'background-color', '#000' )
      .width( '100' )
      .height( '100' );

  bar.addClass( 'my-class-2' )
      .css( 'background-color', '#F00' )
      .width( '200' )
      .height( '200' );
} );
ready
jQuery no cache, no chain
$( function () {
  $( '#foo' ).addClass( 'my-class' );
  $( '#foo' ).css( 'background-color', '#000' );
  $( '#foo' ).width( '100' );
  $( '#foo' ).height( '100' );

  $( '#bar' ).addClass( 'my-class-2' );
  $( '#bar' ).css( 'background-color', '#F00' );
  $( '#bar' ).width( '200' );
  $( '#bar' ).height( '200' );
} );
ready

Revisions

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

  • Revision 1: published by EtnasSoft on