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

Revision 3 of this benchmark created by vralle 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

Revisions

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