jquery chaining vs caching

Benchmark created by furf on

Preparation HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<b style="display:block;" id="byID" class="byClass"></b>

Setup

$('#byID').css({
      'border': 'none',
      'background': 'transparent',
      'width': 'auto',
      'height': 'auto'
    }).text('');

Test runner

Ready to run.

Testing in
TestOps/sec
not caching, ID selector
$('#byID').css('border', '4px dashed red');
$('#byID').css('background', 'purple');
$('#byID').width('400px');
$('#byID').height('300px');
$('#byID').text('you are my sunshine, my only sunshine.');
ready
not caching, class selector
$('.byClass').css('border', '4px dashed red');
$('.byClass').css('background', 'purple');
$('.byClass').width('400px');
$('.byClass').height('300px');
$('.byClass').text('you are my sunshine, my only sunshine.');
ready
caching, ID selector
var el = $('#byID');

el.css('border', '4px dashed red');
el.css('background', 'purple');
el.width('400px');
el.height('300px');
el.text('you are my sunshine, my only sunshine.');
ready
caching, class selector
var el = $('.byClass');

el.css('border', '4px dashed red');
el.css('background', 'purple');
el.width('400px');
el.height('300px');
el.text('you are my sunshine, my only sunshine.');
ready
chaining, ID selector
$('#byID')
  .css('border', '4px dashed red')
  .css('background', 'purple')
  .width('400px')
  .height('300px')
  .text('you are my sunshine, my only sunshine.');
ready
chaining, class selector
$('.byClass')
  .css('border', '4px dashed red')
  .css('background', 'purple')
  .width('400px')
  .height('300px')
  .text('you are my sunshine, my only sunshine.');
ready
not caching, nodeName selector
$('b').css('border', '4px dashed red');
$('b').css('background', 'purple');
$('b').width('400px');
$('b').height('300px');
$('b').text('you are my sunshine, my only sunshine.');
ready
caching, nodeName selector
var el = $('b');

el.css('border', '4px dashed red');
el.css('background', 'purple');
el.width('400px');
el.height('300px');
el.text('you are my sunshine, my only sunshine.');
ready
chaining, nodeName selector
$('b')
  .css('border', '4px dashed red')
  .css('background', 'purple')
  .width('400px')
  .height('300px')
  .text('you are my sunshine, my only sunshine.');
ready

Revisions

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