Benchmark: Traverse function vs NodeIterator vs TreeWalker vs TreeWalker manual filter

Traverse function vs NodeIterator vs TreeWalker vs TreeWalker manual filter (version: 0)

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

Comparing performance of: `Traverse function vs NodeIterator with filter function vs NodeIterator with filter param vs TreeWalker with filter function vs TreeWalker with filter param vs TreeWalker with manual filter`

Created: 4 years ago by: Registered User

Go to the latest result

Script Preparation code:

// 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;

window.testTraverse = function traverse(node, use) {
    if (!node) return;

    use(node);
    traverse(node.firstChild, use);
    traverse(node.nextSibling, use);
}

Tests:

Traverse function
const comments = []; testTraverse(testTemplate.content.firstChild, node => { if (node.nodeType === Node.COMMENT_NODE) { comments.push(node); } });
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); }
TreeWalker with manual filter
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_COMMENT ); const comments = []; let node; while (node = treeWalker.nextNode()) { if (node.nodeType === Node.COMMENT_NODE) comments.push(node); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Traverse function
NodeIterator with filter function
NodeIterator with filter param
TreeWalker with filter function
TreeWalker with filter param
TreeWalker with manual filter

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Browser/OS: Chrome 139 on Windows

View result in a separate tab

TreeWalker with manual filter

2.5M/s

TreeWalker with filter param

2.3M/s

NodeIterator with filter param

2.0M/s

Traverse function

649K/s

TreeWalker with filter function

272K/s

NodeIterator with filter function

100K/s

View exact numbers

Test name	Executions per second
✓ TreeWalker with manual filter	2,524,989 Ops/sec
TreeWalker with filter param	2,264,215 Ops/sec
NodeIterator with filter param	2,024,535 Ops/sec
Traverse function	648,984 Ops/sec
TreeWalker with filter function	272,277 Ops/sec
NodeIterator with filter function	99,549 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The benchmark is designed to compare the performance of four different ways to traverse a DOM tree: using a `for` loop, `NodeIterator`, `TreeWalker`, and a manual filter with `TreeWalker`. The goal is to identify which approach is the fastest.

Here's a brief overview of each method:

1. **Traverse function**: This approach uses a custom `traverse` function that takes a node and an optional callback function as arguments. The function recursively traverses the DOM tree, calling the callback function on each node.
2. **NodeIterator with filter function**: This approach creates a `NodeIterator` object that filters out nodes based on a provided function. The iterator is then used to traverse the DOM tree.
3. **TreeWalker with filter param**: This approach creates a `TreeWalker` object that starts at the root of the DOM tree and walks down the tree, applying a filter function to each node. However, instead of using a callback function, it uses a manual loop to process the nodes.
4. **TreeWalker with manual filter**: This is similar to the previous approach, but instead of using a `for` loop, it manually loops through the nodes and applies the filter.

The benchmark measures the performance of each approach by executing each test 10 times and reporting the average number of executions per second (ExecutionsPerSecond) for each browser instance.

Now, let's analyze the results:

* **Traverse function**: This approach is the slowest, likely due to the overhead of creating a custom `traverse` function.
* **NodeIterator with filter param** and **TreeWalker with filter param**: These approaches are relatively fast, possibly because they leverage the optimized filtering mechanisms built into the DOM API.
* **TreeWalker with manual filter**: This approach is surprisingly slow compared to the other two. It's likely that the manual loop overhead outweighs any potential benefits of using a `for` loop.

Based on these results, it appears that using a custom iterator or walker with a filter function is generally faster than writing your own traversal logic using a `for` loop. However, the performance difference between `NodeIterator` and `TreeWalker` is relatively small.