Run results for: TreeWalker vs querySelectorAll (* all elements) vs function

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:148.0) Gecko/20100101 Firefox/148.0

Browser: Firefox 148

Operating system: Windows

Device Platform: Desktop

Date tested: 7 months ago

Benchmark engine: Benchmark.js

querySelectorAll

3.2M/s

TreeWalker

1.4M/s

getAllElements()

1.4M/s

getAllElementsNaive()

1.0M/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll	3,150,255 Ops/sec
TreeWalker	1,415,046 Ops/sec
getAllElements()	1,381,890 Ops/sec
getAllElementsNaive()	1,027,517 Ops/sec

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()