MeasureThat.net

Run results for: Traverse function vs NodeIterator vs TreeWalker (modified)

Let's compare the speed of 3 different ways to traverse the DOM.

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:130.0) Gecko/20100101 Firefox/130.0
Firefox 130
Mac OS X 10.15
Desktop
6 months ago
Test name Executions per second
Traverse function 826807.2 Ops/sec
NodeIterator with filter function 124906.9 Ops/sec
NodeIterator with filter param 1585992.6 Ops/sec
TreeWalker with filter function 280290.8 Ops/sec
TreeWalker with filter param 1308477.2 Ops/sec
Script Preparation code:
​x
 
// language=HTML
const html = `
    <!-- 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 -->
`;
const template = document.createElement('template');
template.innerHTML = html;
​
window.testTemplate = template;
​
Tests:

  • Traverse function

     
    const comments = [];
    function traverse(node) {
        if (!node) return;
        comments.push(node);
        traverse(node.firstChild);
        traverse(node.nextSibling);
    }
    traverse(testTemplate.content.firstChild);

  • NodeIterator with filter function

     
    const nodeIterator = document.createNodeIterator(
        testTemplate.content,
        NodeFilter.SHOW_ALL,
        {
            acceptNode(node) {
                if (node.nodeType === Node.COMMENT_NODE) {
                    return NodeFilter.FILTER_ACCEPT;
                }
    ​
                return NodeFilter.FILTER_REJECT;
            }
        }
    );
    ​
    const comments = [];
    while (nodeIterator.nextNode()) {
        comments.push(nodeIterator.currentNode);
    }

  • NodeIterator with filter param

     
    const nodeIterator = document.createNodeIterator(
        testTemplate.content,
        NodeFilter.SHOW_COMMENT
    );
    ​
    const comments = [];
    while (nodeIterator.nextNode()) {
        comments.push(nodeIterator.currentNode);
    }

  • TreeWalker with filter function

     
    const treeWalker = document.createTreeWalker(
        testTemplate.content,
        NodeFilter.SHOW_ALL,
        {
            acceptNode(node) {
                if (node.nodeType === Node.COMMENT_NODE) {
                    return NodeFilter.FILTER_ACCEPT;
                }
    ​
                return NodeFilter.FILTER_REJECT;
            }
        }
    );
    ​
    const comments = [];
    while (treeWalker.nextNode()) {
        comments.push(treeWalker.currentNode);
    }

  • TreeWalker with filter param

     
    const treeWalker = document.createTreeWalker(
        testTemplate.content,
        NodeFilter.SHOW_COMMENT
    );
    ​
    const comments = [];
    while (treeWalker.nextNode()) {
        comments.push(treeWalker.currentNode);
    }