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: 2 months ago

Test name	Executions per second
TreeWalker	1415046.4 Ops/sec
querySelectorAll	3150254.8 Ops/sec
getAllElements()	1381890.5 Ops/sec
getAllElementsNaive()	1027517.3 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()

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

TreeWalker

querySelectorAll

getAllElements()

getAllElementsNaive()