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

​x
 
// language=HTMLconst 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);
    }
});

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

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

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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

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

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
Traverse function	256352.4 Ops/sec
NodeIterator with filter function	39205.5 Ops/sec
NodeIterator with filter param	880580.5 Ops/sec
TreeWalker with filter function	108970.4 Ops/sec
TreeWalker with filter param	1010300.9 Ops/sec

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

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:

Traverse function: A custom function that manually traverses the DOM by recursively visiting each node and its children.
NodeIterator: An API that provides an iterator over nodes, allowing for traversal without manually navigating the DOM.
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:

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
NodeIterator
- Pros:
  - Provides a standardized way to traverse the DOM
  - Efficiently navigates large documents
- Cons:
  - Requires additional setup and configuration (filter functions)
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:

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.
Browser support: Each approach has its own set of supported browsers and versions.
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.

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.

Related benchmarks:

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

Jump to the latest result