Benchmark: Traverse function vs NodeIterator vs TreeWalker (swh)

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, nodeType, use) {
    while (node) {
      if (nodeType === node.nodeType)
        use(node);
      traverse(node.firstChild, use);
      node = node.nextSibling;
    }
}

Tests:

Traverse function
const comments = []; testTraverse(testTemplate.content.firstChild, Node.COMMENT_NODE, node => { comments.push(node); });
NodeIterator with filter param
const nodeIterator = document.createNodeIterator( testTemplate.content, NodeFilter.SHOW_COMMENT ); const comments = []; while (nodeIterator.nextNode()) { comments.push(nodeIterator.currentNode); }
TreeWalker with filter param
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_COMMENT ); const comments = []; while (treeWalker.nextNode()) { comments.push(treeWalker.currentNode); }
Traverse filter function
const comments = []; testTraverse(testTemplate.content.firstChild, Node.COMMENT_NODE, node => { comments.push(node); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Traverse function
NodeIterator with filter param
TreeWalker with filter param
Traverse filter function

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript DOM traversal benchmarks.

**What is being tested?**

The provided benchmark tests three different methods to traverse the Document Object Model (DOM) in JavaScript:

1. **Traverse function**: A custom implementation using a recursive function (`testTraverse`) that traverses the DOM starting from a given node and visiting all child nodes recursively.
2. **NodeIterator with filter param**: The `createNodeIterator` method is used to create an iterator that visits all elements matching a specific filter (in this case, `NodeFilter.SHOW_COMMENT`). The iterator yields the current node in each iteration, which is then processed by the test code.
3. **TreeWalker with filter param**: Similar to NodeIterator, but using the `createTreeWalker` method to create a tree walker that visits all nodes matching the filter.

**Options compared**

Each benchmark compares the performance of one of these three methods against others:

* Traverse function vs NodeIterator
* Traverse function vs TreeWalker
* NodeIterator with filter param vs TreeWalker with filter param

**Pros and Cons:**

1. **Traverse function**:
	* Pros: Customizable, efficient for small to medium-sized DOMs.
	* Cons: Can be slow for large DOMs due to recursive traversal; requires manual handling of node types.
2. **NodeIterator with filter param**:
	* Pros: Fast and efficient for traversing the entire DOM, as it uses a native JavaScript API.
	* Cons: Requires specifying the filter, which might not cover all use cases.
3. **TreeWalker with filter param**:
	* Pros: Similar to NodeIterator but provides more control over the traversal order (e.g., depth-first or breadth-first).
	* Cons: Might be slower for very large DOMs due to the overhead of creating a tree walker.

**Other considerations**

* Each method has its own set of node types and methods that can be used to customize the traversal.
* For example, `testTraverse` uses the `nodeType` parameter to decide whether to process the current node or move on to the next one.
* The use of `NodeFilter.SHOW_COMMENT` in the NodeIterator and TreeWalker examples means that only comments are being traversed.

**Special JS features or syntax**

No special JS features or syntax are used beyond standard JavaScript DOM traversal methods. However, note that these benchmarks assume a basic understanding of JavaScript's DOM API.

**Other alternatives**

If you need to traverse a different type of data structure (e.g., an array) in JavaScript, consider using:

* `forEach` method for simple iteration
* `map`, `filter`, or `reduce` methods for more complex transformations
* Libraries like Lodash or Ramda for functional programming utilities

For DOM manipulation, the standard JavaScript API (`document.querySelector`, `document.createElement`, etc.) is often sufficient. However, if you need to handle large amounts of data or perform complex traversals, consider using libraries like jQuery or a custom implementation (like one of the methods tested in this benchmark).

Related benchmarks:

Traverse function vs NodeIterator vs TreeWalker (swh) (version: 0)

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

Comparing performance of: Traverse function vs NodeIterator with filter param vs TreeWalker with filter param vs Traverse filter function

Created: 4 years ago by: Guest

Jump to the latest result

Traverse function

NodeIterator with filter param

TreeWalker with filter param

Traverse filter function

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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