jQuery vs. document.querySelector (v63)

Revision 63 of this benchmark created 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>
      Hello World
    </li>
    <li>
      Hello World
    </li>
    <li>
      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 elem, elems, _i, _len;
    
    elems = document.querySelectorAll("#main ul li");
    
    for (_i = 0, _len = elems.length; _i < _len; _i++) {
      elem = elems[_i];
      elem.style.display = "list-item";
    }
   

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
$("#main ul li").hide();
ready
DOM
var elem, elems, _i, _len;

elems = document.querySelectorAll("#main ul li");

for (_i = 0, _len = elems.length; _i < _len; _i++) {
  elem = elems[_i];
  elem.style.display = "none";
}
 
ready

Revisions

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