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

Traverse function vs NodeIterator vs TreeWalker - with TEXT and ELEMENT (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: 5 years ago by: Registered User

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

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

Test name	Executions per second
Traverse function	1686400.5 Ops/sec
NodeIterator with filter function	243534.3 Ops/sec
NodeIterator with filter param	1458749.0 Ops/sec
TreeWalker with filter function	274987.8 Ops/sec
TreeWalker with filter param	1420367.6 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.

Related benchmarks: