Native/QuerySelector VS jQuery (v9)

Revision 9 of this benchmark created on


Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
    <div id="foo">
        <div class="bar"></div>
    </div>
</div>

<div id="baz"></div>
<div class="bar"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
Native
var tn = document.getElementsByTagName("div");
tn[0].getElementsByClassName("bar");
tn[0].getElementsByTagName("div");
var id = document.getElementById("foo");
var id2 = document.getElementById("baz");
var cl = document.getElementsByClassName("bar");
ready
querySelector
var tn = document.querySelectorAll("div");
tn[0].querySelector(".bar");
tn[0].querySelectorAll("div");
var id = document.querySelector("#foo");
var id2 = document.querySelector("#baz");
var cl = document.querySelectorAll(".bar");
ready
jQuery
var tn = jQuery("div");
tn.first().find(".bar");
tn.first().find("div");
var id = jQuery("#foo");
var id2 = jQuery("#baz");
var cl = jQuery(".bar");
ready

Revisions

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