Benchmark: Traverse function vs NodeIterator vs TreeWalker (modified)

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;

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); }

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Mac OS X 10.15

View result in a separate tab

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

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its components for you.

**Benchmark Definition**

The benchmark tests three different ways to traverse the DOM (Document Object Model) in JavaScript: `traverse` function, `NodeIterator`, and `TreeWalker`. The goal is to compare their performance.

**Options Compared**

1. **Traverse Function**: This approach uses a recursive function to iterate through the DOM tree.
2. **NodeIterator**: This approach uses a specialized iterator that can traverse the DOM tree while filtering nodes based on a given filter function or parameter.
3. **TreeWalker**: This approach uses another specialized iterator that can traverse the DOM tree while filtering nodes based on a given filter function or parameter.

**Pros and Cons**

* **Traverse Function**:
	+ Pros: Easy to implement, flexible, and works with any DOM tree structure.
	+ Cons: Can be slow for large trees due to recursive function calls and potentially redundant node traversals.
* **NodeIterator**:
	+ Pros: Optimized for performance, can filter nodes efficiently using a filter function or parameter.
	+ Cons: May have limitations in terms of filter functionality compared to TreeWalker.
* **TreeWalker**:
	+ Pros: Offers more flexibility than NodeIterator when it comes to filtering nodes, with the ability to use custom functions and regular expressions.
	+ Cons: Can be slower due to the additional overhead of creating a TreeWalker instance.

**Other Considerations**

* All three approaches assume that the DOM tree is relatively small and manageable. For very large trees, other optimization techniques might be necessary.
* The filter function or parameter used with NodeIterator and TreeWalker can significantly impact performance. A well-tuned filter can improve performance, while a poorly tuned one can introduce significant overhead.

**Library/Library-like Features**

None of the approaches rely on a specific library, but they do utilize browser APIs:
* `document.createNodeIterator` and `document.createTreeWalker` are part of the DOM API.
* The `acceptNode` function in NodeIterator and TreeWalker filter functions is also part of the DOM API.

**Special JS Features/Syntax**

None of the approaches explicitly use special JavaScript features or syntax, but they do rely on:

* Recursive function calls in the traverse function approach.
* Custom filter functions and regular expressions in NodeIterator and TreeWalker.

In summary, this benchmark compares three different ways to traverse the DOM tree in JavaScript: a custom `traverse` function, `NodeIterator`, and `TreeWalker`. Each approach has its pros and cons, and the choice of which one to use depends on the specific requirements of your project.

Related benchmarks:

Traverse function vs NodeIterator vs TreeWalker (modified) (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

Created: 2 months ago by: Guest

Jump to the latest result

Traverse function

NodeIterator with filter function

NodeIterator with filter param

TreeWalker with filter function

TreeWalker with filter param

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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