Loop document.getElementsByTagName v.s. jQuery() (v13)

Revision 13 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.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">
  </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 += " opa";
}
ready
jQuery
$('li').addClass('opa');
ready
Cache array lengths JS ++i
var table = document.getElementsByTagName("li");
for(var i = 0; i < table.length; i++) {
        table[i].className += " opa";
}
ready
For Fail
var elements = document.getElementsByTagName("noneExists"), tmp, i=0;
for(; elements[i]; i++){
   tmp.nevergonnahappen = elements[i];
}
 
ready
While Fail
var elements = document.getElementsByTagName("noneExists"), tmp, i=0;
while(tmp = elements[i]){
   tmp.nevergonnahappen = elements[i];
   i++;
}
ready

Revisions

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