Benchmark: Traverse function vs NodeIterator vs TreeWalker (swh-2)

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.dom_traverse = function dom_traverse(tip, nodeType, fn_use) {
  let ch
  while (tip) {
    if (nodeType === tip.nodeType)
      fn_use(tip);

    if (ch = tip.firstChild)
      dom_traverse(ch, fn_use);

    tip = tip.nextSibling;
  }
}

Tests:

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 = []; dom_traverse(testTemplate.content, Node.COMMENT_NODE, node => { comments.push(node); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36

Browser/OS: Chrome 95 on Linux

View result in a separate tab

Test name	Executions per second
NodeIterator with filter param	743400.0 Ops/sec
TreeWalker with filter param	841682.3 Ops/sec
Traverse filter function	251041.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what is tested on the provided JSON.

**Benchmark Goal**

The goal of this benchmark is to compare the performance of three different methods for traversing the DOM (Document Object Model) in JavaScript:

1. **NodeIterator**: A way to traverse a node tree, allowing you to iterate over child nodes and their descendants.
2. **TreeWalker**: A more advanced method for traversing the DOM tree, which provides more control over the traversal process.
3. **Custom filter function** (implemented using the `dom_traverse` function): This is a custom approach that allows you to write your own logic for filtering and processing nodes during traversal.

**Options Compared**

The benchmark compares the performance of these three methods in the following ways:

* **NodeIterator**: Creates a NodeIterator object, specifies a filter parameter (`NodeFilter.SHOW_COMMENT`), and then iterates over the node tree using `nextNode()`.
* **TreeWalker**: Creates a TreeWalker object, specifies a filter parameter (`NodeFilter.SHOW_COMMENT`), and then iterates over the node tree using `nextNode()`.

The custom filter function uses the same approach as NodeIterator but with a custom callback function that pushes nodes to an array based on some condition (in this case, filtering comments).

**Pros and Cons**

Here's a brief summary of the pros and cons of each method:

* **NodeIterator**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: Limited control over traversal process, no built-in support for complex filters.
* **TreeWalker**:
	+ Pros: Provides more control over traversal process, supports complex filters, and is designed for use cases like this benchmark.
	+ Cons: More overhead due to the additional API, might be slower than NodeIterator in some cases.
* **Custom filter function**:
	+ Pros: Allows for custom logic and flexibility, can be optimized for specific use cases.
	+ Cons: Requires more code and expertise, might lead to performance overhead if not implemented correctly.

**Library**

In this benchmark, the following libraries are used:

* `NodeFilter`: A built-in API for specifying filters when traversing the DOM tree. It provides a set of predefined constants (e.g., `SHOW_COMMENT`) that can be combined using logical operators.
* `TreeWalker`: Another built-in API for traversing the DOM tree, which allows you to specify filters and other options.

**Special JS Feature/Syntax**

This benchmark uses the following special JavaScript features:

* `const` declaration: Used to declare variables with block scope.
* `let` declaration: Used to declare variables that can be reassigned later.
* Template literals (e.g., `"\r\n    \r\n..."`): Used to create multi-line string literals.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* **ForIn loop**: You could use a ForIn loop to iterate over the node tree, but this would likely be slower and less flexible than the methods used in the benchmark.
* **QuerySelectorAll**: This method can be used to select nodes based on CSS selectors, which might provide more flexibility than the filter parameters used in NodeIterator and TreeWalker. However, it's generally slower than these methods due to the additional overhead of selecting nodes.

Keep in mind that this is just a starting point for exploring alternative approaches, and you may need to experiment with different methods to find the best solution for your specific use case.

Related benchmarks:

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

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

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

Created: 3 years ago by: Guest

Jump to the latest result

NodeIterator with filter param

TreeWalker with filter param

Traverse filter function

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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