jQuery vs. document.querySelector (v45)

Revision 45 of this benchmark created on

Description

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

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yuiloader/yuiloader-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1/dojo/dojo.xd.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
<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 el = document.querySelector("#main ul:first-child");
    el.style.display = "list-item";

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
$("#main ul:first-child").hide();
ready
DOM
var el = document.querySelector("#main ul:first-child");
el.style.display = "none";
ready

Revisions

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