Native/QuerySelector VS jQuery (v10)

Revision 10 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>

<script>
function select(selector, element)
{
    element = element || document;
    selector = selector.replace(/(^\s|\s$)/, "");

    if (selector.indexOf(",") > 0)
    {
        var selectors = selector.split(",");
        for (var index = 0; index < selectors.length; index++)
        {
            selectors[index] = select(selectors[index]);
        }

        return selectors;
    }
    else if (selector.length < 1)
    {
        return null;
    }
    else
    {
        if (selector.charAt(0) == "#")
        {
            return element.getElementById(selector.substring(1));
        }
        else if (selector.charAt(0) == ".")
        {
            return element.getElementsByClassName(selector.substring(1));
        }
        else
        {
            return element.getElementsByTagName(selector);
        }
    }
}
</script>

<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
Selector IMP
var div = select("div")[0];
select(".bar", div);
select("div", div);
var id = select("#foo");
var id2 = select("#baz");
var cl = select(".bar");
ready

Revisions

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