Benchmark: Traverse function vs NodeIterator vs TreeWalker - with TEXT and ELEMENT

Traverse function vs NodeIterator vs TreeWalker - with TEXT and ELEMENT (version: 0) Benchmark.js

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

Go to the latest result

Script Preparation code:

// language=HTML
const html = `
    <div>
      <p>This is some random text.</p>
      <div>
        <p>This is more random text with <span>SPAN ELEMENT</span> inside.</p>
      </div>
    </div>
`;
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.ELEMENT_NODE | Node.TEXT_NODE) { comments.push(node); } });
NodeIterator with filter function
const nodeIterator = document.createNodeIterator( testTemplate.content, NodeFilter.SHOW_ALL, { acceptNode(node) { if (node.nodeType === Node.ELEMENT_NODE | Node.TEXT_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_ELEMENT | NodeFilter.SHOW_TEXT ); 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.ELEMENT_NODE | Node.TEXT_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_ELEMENT | NodeFilter.SHOW_TEXT ); const comments = []; while (treeWalker.nextNode()) { comments.push(treeWalker.currentNode); }

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Traverse function

1.6M/s

TreeWalker with filter param

1.2M/s

NodeIterator with filter param

1.1M/s

TreeWalker with filter function

106K/s

NodeIterator with filter function

99K/s

Fastest: Traverse function (15.7x faster)

View exact numbers

✓ Traverse function: 1,559,814 ops/sec
• TreeWalker with filter param: 1,193,194 ops/sec
• NodeIterator with filter param: 1,114,718 ops/sec
• TreeWalker with filter function: 106,369 ops/sec
• NodeIterator with filter function: 99,458 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: 6 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Mac OS X 10.15.7

View result in a separate tab

Traverse function

1.7M/s

NodeIterator with filter param

1.5M/s

TreeWalker with filter param

1.4M/s

TreeWalker with filter function

275K/s

NodeIterator with filter function

244K/s

View exact numbers

Test name	Executions per second
✓ Traverse function	1,686,400 Ops/sec
NodeIterator with filter param	1,458,749 Ops/sec
TreeWalker with filter param	1,420,368 Ops/sec
TreeWalker with filter function	274,988 Ops/sec
NodeIterator with filter function	243,534 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net benchmark compares the performance of three DOM traversal methods in JavaScript: `traverse` function, NodeIterator, and TreeWalker.

**Traverse Function**

The `traverse` function is a custom implementation that traverses the DOM tree recursively. It takes two arguments: `node` (the current node being processed) and a callback function (`use`) that is applied to each node. The traverse function checks if the node is an element or text node, and pushes it into the `comments` array.

Pros:

* Simple to understand and implement
* Allows for easy customization of traversal logic

Cons:

* Can be slow for large DOM trees due to recursive function calls
* May not be optimized for performance

**NodeIterator**

NodeIterator is a built-in DOM API that allows traversing the DOM tree in a more controlled manner. It takes two arguments: `root` (the root node of the traversal) and an optional filter object (`filter`). The NodeIterator returns an iterator that yields nodes, which can be processed in the filter function.

Pros:

* Faster than the traverse function for large DOM trees
* Provides more control over the traversal process

Cons:

* Requires knowledge of the NodeIterator API
* May require additional setup and configuration

**TreeWalker**

TreeWalker is another built-in DOM API that allows traversing the DOM tree. It takes two arguments: `root` (the root node of the traversal) and an optional filter object (`filter`). The TreeWalker returns a walker object that provides methods for navigating the DOM tree.

Pros:

* Similar to NodeIterator, but with more features and flexibility
* Faster than the traverse function for large DOM trees

Cons:

* Requires knowledge of the TreeWalker API
* May require additional setup and configuration

**Library: HTMLTemplate**

The benchmark uses an HTML template library to create a sample HTML document. The `template` variable is created using `document.createElement('template')`, which allows us to easily modify and manipulate the HTML structure.

Pros:

* Convenient way to create sample HTML documents
* Easy to control the structure and content of the DOM tree

Cons:

* May not be suitable for all use cases, such as complex or dynamic HTML structures

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark. The code is straightforward and easy to understand.

**Alternatives**

Other alternatives for DOM traversal include:

1. `DocumentFragment`: A fragment of a document that can be used to traverse the DOM tree.
2. `QuerySelector` and `QuerySelectorAll`: Selectors can be used to traverse the DOM tree and select specific nodes.
3. Custom implementations using JavaScript libraries like React or Angular.

Note: These alternatives may have different performance characteristics and requirements depending on the use case.

Traverse function vs NodeIterator vs TreeWalker - with TEXT and ELEMENT (version: 0) Benchmark.js

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

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 9 community runs

Desktop Results:

Chrome 9 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`