querySelectorAll vs TreeWalker

Benchmark created by Stefan Charsley on October 30, 2013

Description

Preparation HTML

<script>
function qsa (selector) {
var a  = document.createTreeWalker(document, NodeFilter.SHOW_ELEMENT, function(element){
var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.msMatchesSelector || element.matchesSelector;
return matchesSelector.call(element, selector) || 3;
}, true), b, c = [];
while (b = a.nextNode()) c[c.length] = b;
return c
}
</script>

<div id="my_div">
<p>Hello World!</p>
<ul class="list">
<li><span>meow</span></li>
<li><b some-attribute="something">Boolean</b></li>
</ul>
</div>

Setup

var selector1 = "#my_div"
    var selector2 = "#my_div p"
    var selector3 = ".list"
    var selector4 = "li b"
    var selector5 = "li span"
    var selector6 = "div ul li"
    var selector7 = "b[some-attribute='something']"

Teardown

    delete selector1
    delete selector2
    delete selector3
    delete selector4
    delete selector5
    delete selector6
    delete selector7
  

Test runner

document.querySelectorAll(selector1)
document.querySelectorAll(selector2)
document.querySelectorAll(selector3)
document.querySelectorAll(selector4)
document.querySelectorAll(selector5)
document.querySelectorAll(selector6)
document.querySelectorAll(selector7)

qsa(selector1)
qsa(selector2)
qsa(selector3)
qsa(selector4)
qsa(selector5)
qsa(selector6)
qsa(selector7)

Revisions

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

• Revision 1: published by Stefan Charsley on October 30, 2013