Multiple selections, same action (v2)

Revision 2 of this benchmark created by devu on

Preparation HTML

<style>
  .added { color: red; }
</style>
<section id="container">
<div id="one" class="select">
  Lorem.
</div>
<div id="two" class="select">
  Lorem.
</div>
<div id="three" class="select">
  Lorem.
</div>
<div id="four" class="select">
  Lorem.
</div>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Teardown


    $('div').removeClass('added');

Test runner

Ready to run.

Testing in
TestOps/sec
Separate IDs
$('#one').addClass('added');
$('#two').addClass('added');
$('#three').addClass('added');
$('#four').addClass('added');
ready
Chained IDs
$('#one, #two, #three, #four').addClass('added');
ready
Class
$('.select').addClass('added');
ready
Element
$('div').addClass('added');
ready
Child element
$('section div').addClass('added');
ready
Child ID
$('section #one').addClass('added');
$('section #two').addClass('added');
$('section #three').addClass('added');
$('section #four').addClass('added');
ready
Child ID with parent class
$('#container #one').addClass('added');
$('#container #two').addClass('added');
$('#container #three').addClass('added');
$('#container #four').addClass('added');
ready
pure JS
document.getElementById("one").className = "added";
document.getElementById("two").className = "added";
document.getElementById("three").className = "added";
document.getElementById("four").className = "added";
ready

Revisions

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