Benchmark: Traverse function vs NodeIterator vs TreeWalker

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

Historical Performance Data aggregated from 96 community runs

Desktop Results:

Chrome 60 runs

TreeWalker with filter param

947K/s

NodeIterator with filter param

832K/s

Traverse function

149K/s

TreeWalker with filter function

78K/s

NodeIterator with filter function

30K/s

Fastest: TreeWalker with filter param (32.0x faster)

View exact numbers

✓ TreeWalker with filter param: 946,711 ops/sec
• NodeIterator with filter param: 831,734 ops/sec
• Traverse function: 148,949 ops/sec
• TreeWalker with filter function: 78,009 ops/sec
• NodeIterator with filter function: 29,576 ops/sec

Firefox 13 runs

NodeIterator with filter param

1.2M/s

TreeWalker with filter param

1.0M/s

Traverse function

511K/s

TreeWalker with filter function

232K/s

NodeIterator with filter function

93K/s

Fastest: NodeIterator with filter param (13.0x faster)

View exact numbers

✓ NodeIterator with filter param: 1,216,349 ops/sec
• TreeWalker with filter param: 1,006,956 ops/sec
• Traverse function: 510,616 ops/sec
• TreeWalker with filter function: 231,992 ops/sec
• NodeIterator with filter function: 93,351 ops/sec

Mobile Results:

Chrome 15 runs

TreeWalker with filter param

798K/s

NodeIterator with filter param

643K/s

Traverse function

107K/s

TreeWalker with filter function

68K/s

NodeIterator with filter function

27K/s

Fastest: TreeWalker with filter param (29.7x faster)

View exact numbers

✓ TreeWalker with filter param: 798,190 ops/sec
• NodeIterator with filter param: 643,333 ops/sec
• Traverse function: 107,030 ops/sec
• TreeWalker with filter function: 67,925 ops/sec
• NodeIterator with filter function: 26,893 ops/sec

Safari 8 runs

TreeWalker with filter param

1.8M/s

NodeIterator with filter param

1.5M/s

Traverse function

241K/s

TreeWalker with filter function

192K/s

NodeIterator with filter function

89K/s

Fastest: TreeWalker with filter param (19.8x faster)

View exact numbers

✓ TreeWalker with filter param: 1,757,188 ops/sec
• NodeIterator with filter param: 1,525,667 ops/sec
• Traverse function: 241,490 ops/sec
• TreeWalker with filter function: 192,045 ops/sec
• NodeIterator with filter function: 88,541 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 19 days ago)

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

Browser/OS: Chrome 150 on Windows

View result in a separate tab

TreeWalker with filter param

1.7M/s

NodeIterator with filter param

1.4M/s

Traverse function

571K/s

TreeWalker with filter function

210K/s

NodeIterator with filter function

77K/s

View exact numbers

Test name	Executions per second
✓ TreeWalker with filter param	1,674,158 Ops/sec
NodeIterator with filter param	1,356,490 Ops/sec
Traverse function	571,423 Ops/sec
TreeWalker with filter function	210,422 Ops/sec
NodeIterator with filter function	76,542 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 world of JavaScript DOM traversal.

**What is being tested?**

MeasureThat.net is testing three different methods to traverse the Document Object Model (DOM) in HTML documents:

1. **Traverse function**: A custom function that manually traverses the DOM by recursively visiting each node and its children.
2. **NodeIterator**: An API that provides an iterator over nodes, allowing for traversal without manually navigating the DOM.
3. **TreeWalker**: Another API that enables traversal of the DOM tree, similar to NodeIterator.

**Options compared**

Each test case compares two different approaches:

* `Traverse function` vs. `NodeIterator`
* `NodeIterator` vs. `TreeWalker`

These comparisons help measure the performance differences between each approach.

**Pros and cons of each approach:**

1. **Traverse function**
	* Pros:
		+ Easy to implement and understand
		+ Allows for fine-grained control over traversal logic
	* Cons:
		+ Can be slower due to manual node visits
2. **NodeIterator**
	* Pros:
		+ Provides a standardized way to traverse the DOM
		+ Efficiently navigates large documents
	* Cons:
		+ Requires additional setup and configuration (filter functions)
3. **TreeWalker**
	* Pros:
		+ Similar to NodeIterator, but with more features (e.g., accept/Reject nodes)
		+ Allows for more flexible traversal logic
	* Cons:
		+ May require more complex setup and filtering

**Other considerations:**

1. **DOM structure**: The performance differences between these approaches can be influenced by the document's DOM structure, particularly when dealing with large amounts of nested content.
2. **Browser support**: Each approach has its own set of supported browsers and versions.
3. **Edge cases**: Specific scenarios, like traversing documents with multiple root elements or handling edge cases (e.g., SVGs), may impact performance.

**Benchmark results**

The latest benchmark results show that:

* `Traverse function` outperforms `NodeIterator` and `TreeWalker` for the most recent iOS version.
* `NodeIterator` and `TreeWalker` are relatively close in performance, but `NodeIterator` is faster on older versions of iOS.

These results suggest that, on average, the `Traverse function` performs better than `NodeIterator`, while `NodeIterator` takes a lead over `TreeWalker`. However, it's essential to consider individual document structures and edge cases when choosing an approach for your specific use case.

Traverse function vs NodeIterator vs TreeWalker (version: 2)

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

Go to the latest result

Traverse function

NodeIterator with filter function

NodeIterator with filter param

TreeWalker with filter function

TreeWalker with filter param

Historical Performance Data aggregated from 96 community runs

Desktop Results:

Chrome 60 runs

Firefox 13 runs

Mobile Results:

Chrome 15 runs

Safari 8 runs

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 (version: 2)

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

Go to the latest result

Traverse function

NodeIterator with filter function

NodeIterator with filter param

TreeWalker with filter function

TreeWalker with filter param

Historical Performance Data aggregated from 96 community runs

Desktop Results:

Chrome 60 runs

Firefox 13 runs

Mobile Results:

Chrome 15 runs

Safari 8 runs

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`