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;

​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;​

Tests:

Traverse function
const comments = []; function traverse(node) { if (!node) return; comments.push(node); traverse(node.firstChild); traverse(node.nextSibling); } traverse(testTemplate.content.firstChild);
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);
}

 
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: 6 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 5 months ago):

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

Traverse Function: This approach uses a recursive function to iterate through the DOM tree.
NodeIterator: This approach uses a specialized iterator that can traverse the DOM tree while filtering nodes based on a given filter function or parameter.
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.

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: 6 months ago by: Guest

Jump to the latest result

Traverse function