jQUery Selectors vs Native API (v25)

Revision 25 of this benchmark created on

Preparation HTML

<div id="testid"></div>
<div class="testclass"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
 var regex = /[=#@.*]/g;

function newQuerySelectorAll (querySelector){
        var matches = querySelector.match(regex),
            selection, firstChar, tempElm;
        if(matches.length > 0){
            if(matches.length > 1){
                selection = document.querySelectorAll(querySelector)
            } else{
                firstChar = querySelector.charAt(0);
                if(firstChar === "."){
                    selection = document.getElementsByClassName(querySelector.slice(1))
                } else if(firstChar === "#"){
                    //getElementById doesn't return an HTMLCollection, therefore we have to jump through some hoops to make one.
                    var dummyElm = document.createElement("div");
                    if(tempElm = document.getElementById(querySelector.slice(1)))
                        dummyElm.appendChild(tempElm);
                    selection = dummyElm.children;
                } else{
                    selection = document.querySelectorAll(querySelector)
                }
            }
        } else{
            selection = document.getElementsByTagName(querySelector);
        }

        return selection;
    };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery ID Selector
$("#testid");
ready
getElementById
document.getElementById("testid");
ready
jQuery class Selector
$(".testclass");
ready
Native querySelector
document.querySelector(".testclass");
ready
Create jQuery from Native
newQuerySelectorAll('#testid');
ready
Native querySelector to jQuery Object
document.querySelectorAll('#testid');
ready

Revisions

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