Native Selectors v.s. jQuery (v4)

Revision 4 of this benchmark created by vralle on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
<script src="https://raw.github.com/dameleon/tt.js/develop/tt.min.js">
</script>
<ul>
  <li class="1">
  </li>
  <li class="2">
  </li>
  <li class="3">
  </li>
  <li class="4">
  </li>
  <li class="5">
  </li>
  <li class="6">
  </li>
  <li class="7">
  </li>
  <li class="8">
  </li>
  <li class="9">
  </li>
  <li class="10">
  </li>
  <li class="11">
  </li>
  <li class="12">
  </li>
  <li class="13">
  </li>
  <li class="14">
  </li>
  <li class="15">
  </li>
  <li class="16" id="submit">
  </li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementsByTagName + Loop
var items = document.getElementsByTagName('li');
for(var i = 0; i < items.length; i++) {
        items[i].className += '';
}
ready
jQuery
$('li').addClass('');
ready
Cache array lengths JS ++i
var items = document.getElementsByTagName("li");
for(var i = 0, qty = items.length; i < qty; ++i) {
        items[i].className += '';
}
ready
getElementById
var submit = { elems:{ el:document.getElementById('submit') } };

if (submit.elems.el != void(0)) submit.elems.el.className += '';
ready
jQuery (ID)
$('#submit').addClass('');
ready
var items = document.getElementsByTagName('li'),
count = items.length;
for(var i = 0; i < count; i++) {
        items[i].className += '';
}
ready
var items = document.getElementsByTagName('li'),
    i=0;
while(i < items.length){
    items[i].className += '';
    i++;
}
 
ready

Revisions

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