jQuery vs. document.querySelector (v145)

Revision 145 of this benchmark created by slim on

Description

I know its been done before. Just want to see for myself

Preparation HTML

<div id="main">
  <ul class="gallery">
    <li>
      Hello World
    </li>
    <li class="bla">
      Hello World
    </li>
    <li>
      Hello World
    </li>
    <li class="bla">
      Hello World
    </li>
    <li>
      Hello World
    </li>
    <li>
      Hello World
    </li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Teardown


    var silo = document.querySelector("#main ul"), lis = silo.getElementsByTagName("li");
      for(var i=0; i<lis.length; ++i) {
        lis[i].classList.toggle('bla');
      }

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
var jqEl = $('#main').find('li');
  jqEl.toggleClass('bla');
ready
DOM
var silo = document.querySelector("#main ul"), lis = silo.getElementsByTagName("li");
  for(var i=0; i<lis.length; ++i) {
    lis[i].classList.toggle('bla');
  }
ready

Revisions

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