Selector Reuse (v2)

Revision 2 of this benchmark created by Kurt on

Description

Identifying the differences of CSS style selectors, which will run through Sizzle, compared to: similar selectors with a container and specific selectors like ID's.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="container">
  <p>
    Cool stuff here
  </p>
  <a id="single-button" class="single-button" href="#" />
</div>

Setup

cached_button = $('#single-button');

Test runner

Ready to run.

Testing in
TestOps/sec
CSS Style Selector
$('div a.single-button').css('margin-left', '5px');
$('div a.single-button').height('10px');
$('div a.single-button').width('50px');
$('div a.single-button').show();
ready
Specific Selector
$('.single-button', '#container').css('margin-left', '5px');
$('.single-button', '#container').height('10px');
$('.single-button', '#container').width('50px');
$('.single-button', '#container').show();
ready
Cached container
$('.single-button', cached_container).css('margin-left', '5px');
$('.single-button', cached_container).height('10px');
$('.single-button', cached_container).width('50px');
$('.single-button', cached_container).show();
ready
Selecting with ID
$('#single-button').css('margin-left', '5px');
$('#single-button').height('10px');
$('#single-button').width('50px');
$('#single-button').show();
ready
Cached element
cached_button.css('margin-left', '5px');
cached_button.height('10px');
cached_button.width('50px');
cached_button.show();
ready

Revisions

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