Benchmark: TreeWalker vs querySelectorAll (* all elements) vs function

HTML Preparation code:

<!-- article out start -->
<article>
  <!-- article in start -->
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
  <!-- article in end -->
</article>
<!-- article out end -->

<!-- article out start -->
<article>
  <!-- article in start -->
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
  <!-- article in end -->
</article>
<!-- article out end -->

<!-- article out start -->
<article>
  <!-- article in start -->
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
  <!-- article in end -->
</article>
<!-- article out end -->

Script Preparation code:

function getAllElements(root = document.body) {
    const elements = [];
    const elementStack = [];
    const indexStack = [];

    let current = root;
    let currentChildren = current.children;
    let i = 0;
    let depth = 0;
    while (true) {
        if (currentChildren.length > i) {
            const el = currentChildren.item(i++);
            elements.push(el);
            if (el.childElementCount > 0) {
                elementStack[depth] = current;
                indexStack[depth] = i;
                depth += 1;
                i = 0;
                current = el;
                currentChildren = el.children;
            }
        } else if (depth > 0) {
            depth -= 1;
            i = indexStack[depth];
            current = elementStack[depth];
            currentChildren = current.children;
        } else {
            break;
        }
    }
    return elements;
}

function getAllElementsNaive(root = document.body) {
    const elements = [];
    const stack = [];

    let current = root;
    let i = 0;
    while (true) {
        if (current.children.length > i) {
            const el = current.children.item(i++);
            elements.push(el);
            if (el.childElementCount > 0) {
                stack.push([current, i]);
                i = 0;
                current = el;
            }
        } else if (stack.length > 0) {
            [current, i] = stack.pop();
        } else {
            break;
        }
    }
    return elements;
}

Tests:

TreeWalker
const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT ); const list = []; let element; while (element = treeWalker.nextNode()) { list.push(element); }
querySelectorAll
const list = document.body.querySelectorAll('*');
getAllElements()
getAllElements()
getAllElementsNaive()
getAllElementsNaive()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
TreeWalker
querySelectorAll
getAllElements()
getAllElementsNaive()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Linux

View result in a separate tab

Test name	Executions per second
TreeWalker	964410.7 Ops/sec
querySelectorAll	1153708.0 Ops/sec
getAllElements()	600877.2 Ops/sec
getAllElementsNaive()	487804.9 Ops/sec

Related benchmarks:

TreeWalker vs querySelectorAll (* all elements) vs function (version: 1)

Comparing performance of: TreeWalker vs querySelectorAll vs getAllElements() vs getAllElementsNaive()

Created: 3 months ago by: Guest

Jump to the latest result

TreeWalker

querySelectorAll

getAllElements()

getAllElementsNaive()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A