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: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Linux

View result in a separate tab

TreeWalker with filter param

432K/s

NodeIterator with filter param

290K/s

Traverse function

238K/s

TreeWalker with filter function

34K/s

NodeIterator with filter function

12K/s

View exact numbers

Test name	Executions per second
✓ TreeWalker with filter param	431,504 Ops/sec
NodeIterator with filter param	290,455 Ops/sec
Traverse function	238,147 Ops/sec
TreeWalker with filter function	33,777 Ops/sec
NodeIterator with filter function	11,784 Ops/sec

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

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: one year ago by: Guest

Go 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>

Fastest: N/A

Slowest: N/A

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

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: one year ago by: Guest

Go 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>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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`