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: 2 years ago by: Registered User

Jump 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

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days 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.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Traverse function	79054.7 Ops/sec
NodeIterator with filter function	10848.6 Ops/sec
NodeIterator with filter param	585815.9 Ops/sec
TreeWalker with filter function	30495.9 Ops/sec
TreeWalker with filter param	636782.2 Ops/sec
TreeWalker with manual filter	307164.8 Ops/sec

Related benchmarks:

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: 2 years ago by: Registered User

Jump to the latest result

Traverse function

NodeIterator with filter function

NodeIterator with filter param

TreeWalker with filter function

TreeWalker with filter param

TreeWalker with manual filter

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):