Benchmark: Traverse function vs NodeIterator vs TreeWalker (elements)

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 elements = [];
function traverse(node) {
    if (!node) return;
  	if (node.nodeType === Node.ELEMENT_NODE) {
        elements.push(node);
    }
    traverse(node.nextElementSibling);
    traverse(node.firstElementChild);
}
traverse(testTemplate.content.firstElementChild);
if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);

 
const elements = [];function traverse(node) {    if (!node) return;    if (node.nodeType === Node.ELEMENT_NODE) {        elements.push(node);    }    traverse(node.nextElementSibling);    traverse(node.firstElementChild);}traverse(testTemplate.content.firstElementChild);if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);

NodeIterator with filter function

const nodeIterator = document.createNodeIterator(
    testTemplate.content,
    NodeFilter.SHOW_ALL,
    {
        acceptNode(node) {
            if (node.nodeType === Node.ELEMENT_NODE) {
                return NodeFilter.FILTER_ACCEPT;
            }

            return NodeFilter.FILTER_REJECT;
        }
    }
);

const elements = [];
while (nodeIterator.nextNode()) {
    elements.push(nodeIterator.currentNode);
}
if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);

 
const nodeIterator = document.createNodeIterator(    testTemplate.content,    NodeFilter.SHOW_ALL,    {        acceptNode(node) {            if (node.nodeType === Node.ELEMENT_NODE) {                return NodeFilter.FILTER_ACCEPT;            }​            return NodeFilter.FILTER_REJECT;        }    });​const elements = [];while (nodeIterator.nextNode()) {    elements.push(nodeIterator.currentNode);}if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);

NodeIterator with filter param
const nodeIterator = document.createNodeIterator( testTemplate.content, NodeFilter.SHOW_ELEMENT ); const elements = []; while (nodeIterator.nextNode()) { elements.push(nodeIterator.currentNode); } if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);
const nodeIterator = document.createNodeIterator(
testTemplate.content,
NodeFilter.SHOW_ELEMENT
);

const elements = [];
while (nodeIterator.nextNode()) {
elements.push(nodeIterator.currentNode);
}
if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);

TreeWalker with filter function

const treeWalker = document.createTreeWalker(
    testTemplate.content,
    NodeFilter.SHOW_ALL,
    {
        acceptNode(node) {
            if (node.nodeType === Node.ELEMENT_NODE) {
                return NodeFilter.FILTER_ACCEPT;
            }

            return NodeFilter.FILTER_REJECT;
        }
    }
);

const elements = [];
while (treeWalker.nextNode()) {
    elements.push(treeWalker.currentNode);
}
if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);

 
const treeWalker = document.createTreeWalker(    testTemplate.content,    NodeFilter.SHOW_ALL,    {        acceptNode(node) {            if (node.nodeType === Node.ELEMENT_NODE) {                return NodeFilter.FILTER_ACCEPT;            }​            return NodeFilter.FILTER_REJECT;        }    });​const elements = [];while (treeWalker.nextNode()) {    elements.push(treeWalker.currentNode);}if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);

TreeWalker with filter param
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_ELEMENT ); const elements = []; while (treeWalker.nextNode()) { elements.push(treeWalker.currentNode); } if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);
const treeWalker = document.createTreeWalker(
testTemplate.content,
NodeFilter.SHOW_ELEMENT
);

const elements = [];
while (treeWalker.nextNode()) {
elements.push(treeWalker.currentNode);
}
if (elements.length !== 9) throw new Error(`Expected 9 elements, got ${elements.length}`);

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 (X11; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Linux

View result in a separate tab

Test name	Executions per second
Traverse function	4022718.0 Ops/sec
NodeIterator with filter function	103098.7 Ops/sec
NodeIterator with filter param	1703766.1 Ops/sec
TreeWalker with filter function	95947.6 Ops/sec
TreeWalker with filter param	1571171.5 Ops/sec

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

Let's break down what's being tested in this benchmark.

Benchmark Goal: The goal of this benchmark is to compare the speed of three different ways to traverse a DOM tree (a hierarchical structure used by web browsers to represent and manipulate HTML documents).

Test Cases:

Traverse function: This test case uses a recursive function to traverse the DOM tree, starting from the first child element (testTemplate.content.firstElementChild). The function checks if each node is an ELEMENT_NODE and pushes it to an array.
NodeIterator with filter function: This test case creates a NodeIterator, which allows for traversing nodes in the DOM tree, but with a custom filter function. In this case, the filter function rejects elements that are not ELEMENT_NODE, ensuring only element nodes are visited. The iterator is used to push node references to an array.
NodeIterator with filter param: This test case creates a NodeIterator similar to the previous one, but without the custom filter function. Instead, it uses a fixed filter parameter (NodeFilter.SHOW_ELEMENT) that accepts only ELEMENT_NODE nodes by default.
TreeWalker with filter function: This test case creates a TreeWalker iterator, which traverses the DOM tree in a more efficient way than traditional recursive traversal methods. The custom filter function ensures only ELEMENT_NODE nodes are visited.
TreeWalker with filter param: This test case creates a TreeWalker iterator similar to the previous one, but without the custom filter function.

Comparison:

Traverse function vs NodeIterator (with filter function): Both approaches reject non-element nodes, but the traverse function is likely slower due to its recursive nature.
Traverse function vs TreeWalker (with filter function): The TreeWalker approach is expected to be faster than the traverse function, as it's optimized for traversing DOM trees in a more efficient manner.
NodeIterator (with filter param) vs TreeWalker (with filter param): Both approaches accept all element nodes by default, but the tree walker may still outperform the node iterator due to its optimized traversal algorithm.

Benchmark Results: The latest benchmark results show that:

Traverse function is relatively slow
TreeWalker with filter param is faster than NodeIterator with filter param
TreeWalker with filter function is slightly slower than TreeWalker with filter param

In general, these results suggest that the tree walker approach is a good choice when traversing DOM trees in performance-critical code paths.

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Goal:**
The goal of this benchmark is to compare the speed of three different ways to traverse a DOM tree (a hierarchical structure used by web browsers to represent and manipulate HTML documents).

**Test Cases:**

1. **Traverse function**: This test case uses a recursive function to traverse the DOM tree, starting from the first child element (`testTemplate.content.firstElementChild`). The function checks if each node is an `ELEMENT_NODE` and pushes it to an array.
2. **NodeIterator with filter function**: This test case creates a NodeIterator, which allows for traversing nodes in the DOM tree, but with a custom filter function. In this case, the filter function rejects elements that are not `ELEMENT_NODE`, ensuring only element nodes are visited. The iterator is used to push node references to an array.
3. **NodeIterator with filter param**: This test case creates a NodeIterator similar to the previous one, but without the custom filter function. Instead, it uses a fixed filter parameter (`NodeFilter.SHOW_ELEMENT`) that accepts only `ELEMENT_NODE` nodes by default.
4. **TreeWalker with filter function**: This test case creates a TreeWalker iterator, which traverses the DOM tree in a more efficient way than traditional recursive traversal methods. The custom filter function ensures only `ELEMENT_NODE` nodes are visited.
5. **TreeWalker with filter param**: This test case creates a TreeWalker iterator similar to the previous one, but without the custom filter function.

**Comparison:**

* Traverse function vs NodeIterator (with filter function): Both approaches reject non-element nodes, but the traverse function is likely slower due to its recursive nature.
* Traverse function vs TreeWalker (with filter function): The TreeWalker approach is expected to be faster than the traverse function, as it's optimized for traversing DOM trees in a more efficient manner.
* NodeIterator (with filter param) vs TreeWalker (with filter param): Both approaches accept all element nodes by default, but the tree walker may still outperform the node iterator due to its optimized traversal algorithm.

**Benchmark Results:**
The latest benchmark results show that:

* Traverse function is relatively slow
* TreeWalker with filter param is faster than NodeIterator with filter param
* TreeWalker with filter function is slightly slower than TreeWalker with filter param

In general, these results suggest that the tree walker approach is a good choice when traversing DOM trees in performance-critical code paths.

Related benchmarks:

Traverse function vs NodeIterator vs TreeWalker (elements) (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