querySelector vs querySelectorAll vs getElementById vs getElementsByClassName vs getElementsByTagName vs getElementsByName

JavaScript performance comparison

Revision 53 of this test case created by Skateside

Info

As getElementById, getElementsByTagName and getElementsByClassName are consistently faster than querySelector and querySelectorAll, is it faster to check a CSS string and pass to one of these than simply defaulting to querySelectorAll? All results are converted into an array for more consistency in results. Modified to remove getElementById, getElementsByTagName and getElementsByClassName as they were so fast it made the other results difficult to see.

Preparation code

<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div id="test">test</div>
 
<script>
Benchmark.prototype.setup = function() {
    var dom = {
   
        toArray: function (nodes) {
   
            var array = [];
   
            if (nodes) {
   
                array = typeof nodes.length === 'number' ?
                        Array.prototype.slice.call(nodes) :
                        [nodes];
   
            }
   
            return array;
   
        },
   
        byId: function (id, context) {
   
            var start = context || document;
   
            return this.toArray(start.getElementById(id));
   
        },
   
        byClass: function (className, context) {
   
            var start = context || document;
   
            return this.toArray(start.getElementsByClassName(className));
   
        },
   
        byTag: function (tag, context) {
   
            var start = context || document;
   
            return this.toArray(start.getElementsByTagName(tag));
   
        },
   
        byQuery: function (query, context) {
   
            var start = context || document;
   
            return this.toArray(start.querySelectorAll(query));
   
        },
   
        get: function (query, context) {
   
            var found = null,
                name  = query.slice(1);
   
            if (/^#\w+$/.test(query)) {
                found = this.byId(name, context);
            } else if (/^\.\w+$/.test(query)) {
                found = this.byClass(name, context);
            } else if (/^\w+$/.test(query)) {
                found = this.byTag(query, context);
            } else {
                found = this.byQuery(query, context);
            }
   
            return found;
   
        },
   
        get2: function (query, context) {
   
            var reg   = /(^#\w+$)|(^\.\w+$)|(^\w+$)/,
                match = query.match(reg),
                name  = query.slice(1),
                found = null;
   
            if (match) {
   
                found = match[1] ?
                        this.byId(name, context) :
                        match[2] ?
                                this.byClass(name, context) :
                                this.byTag(query, context);
   
            } else {
                found = this.byQuery(query, context);
            }
   
            return found;
   
        }
   
    };
};
</script>

Preparation code output

test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
querySelectorAll
dom.toArray(document.querySelectorAll('div#test'));
pending…
get (ID)
dom.get('#test');
pending…
get (class)
dom.get('.test');
pending…
get (tag)
dom.get('div');
pending…
get (query)
dom.get('div#test');
pending…
get2 (ID)
dom.get2('#test');
pending…
get2 (class)
dom.get2('.test');
pending…
get2 (tag)
dom.get2('div');
pending…
get2 (query)
dom.get2('div#test');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment