Benchmark: Traverse function vs NodeIterator vs TreeWalker for TEXT nodes

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 textNodes = []; testTraverse(testTemplate.content.firstChild, node => { if (node.nodeType === Node.SHOW_TEXT) { textNodes.push(node); } });
NodeIterator
const nodeIterator = document.createNodeIterator( testTemplate.content, NodeFilter.SHOW_TEXT ); const textNodes = []; while (nodeIterator.nextNode()) { textNodes.push(nodeIterator.currentNode); }
TreeWalker
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_TEXT ); const textNodes = []; while (treeWalker.nextNode()) { textNodes.push(treeWalker.currentNode); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Traverse function
NodeIterator
TreeWalker

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 114 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Traverse function	236338.8 Ops/sec
NodeIterator	464425.3 Ops/sec
TreeWalker	305889.8 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark measures the performance of three different methods to traverse text nodes in an HTML document:

1. **Traverse Function**: A custom function that recursively visits each node in the DOM, allowing for a user-defined callback.
2. **NodeIterator**: An API provided by web browsers to iterate over nodes in the DOM, specifically designed for traversing text content.
3. **TreeWalker**: Another API provided by web browsers to traverse the DOM, similar to NodeIterator but with more features and flexibility.

**Options Compared**

The benchmark compares these three approaches:

* **Pros of each approach:**
	+ Traverse Function: Customizable, can be optimized for specific use cases.
	+ NodeIterator: Simple, efficient, and widely supported.
	+ TreeWalker: More powerful, flexible, and suitable for complex traversals.
* **Cons of each approach:**
	+ Traverse Function: May require additional memory allocation, has overhead due to recursive function calls.
	+ NodeIterator: Limited control over traversal behavior, may not handle complex nodes correctly.
	+ TreeWalker: Steeper learning curve, more complex implementation.

**Library Usage**

None of the benchmark tests explicitly use any libraries. However, it's worth noting that `Node` and its properties (e.g., `SHOW_TEXT`) are part of the JavaScript API provided by web browsers.

**Special JS Features**

No special JavaScript features or syntax are used in this benchmark. The focus is on comparing different traversal methods.

**Alternative Approaches**

Other alternatives for traversing text nodes include:

* **DOMParser**: Can be used to parse HTML and extract text content.
* **XMLSerializer**: Similar to DOMParser, but designed for XML documents.
* **Regular expressions**: Can be used to search for patterns in text content, but may not provide the same level of control as traversal methods.

These alternatives might be more suitable depending on specific use cases or requirements. For example, using a regular expression might be faster than traversing the DOM, but it may not be as flexible or accurate.

Overall, this benchmark provides a useful comparison between three common methods for traversing text nodes in an HTML document, allowing developers to choose the best approach for their specific needs.

Related benchmarks:

Traverse function vs NodeIterator vs TreeWalker for TEXT nodes (version: 0)

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

Comparing performance of: Traverse function vs NodeIterator vs TreeWalker

Created: one year ago by: Guest

Jump to the latest result

Traverse function

NodeIterator

TreeWalker

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):