Benchmark: Traverse function vs NodeIterator vs TreeWalker vs TreeWalker manual filter

Traverse function vs NodeIterator vs TreeWalker vs TreeWalker manual filter (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 vs TreeWalker with manual filter

Created: 3 years ago by: Registered User

Jump to the latest result

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, use) {
    if (!node) return;

    use(node);
    traverse(node.firstChild, use);
    traverse(node.nextSibling, use);
}

​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;​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.COMMENT_NODE) {
        comments.push(node);
    }
});

 
const comments = [];testTraverse(testTemplate.content.firstChild, node => {    if (node.nodeType === Node.COMMENT_NODE) {        comments.push(node);    }});

NodeIterator with filter function

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

            return NodeFilter.FILTER_REJECT;
        }
    }
);

const comments = [];
while (nodeIterator.nextNode()) {
    comments.push(nodeIterator.currentNode);
}

 
const nodeIterator = document.createNodeIterator(    testTemplate.content,    NodeFilter.SHOW_ALL,    {        acceptNode(node) {            if (node.nodeType === Node.COMMENT_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_COMMENT ); const comments = []; while (nodeIterator.nextNode()) { comments.push(nodeIterator.currentNode); }
const nodeIterator = document.createNodeIterator(
testTemplate.content,
NodeFilter.SHOW_COMMENT
);

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.COMMENT_NODE) {
                return NodeFilter.FILTER_ACCEPT;
            }

            return NodeFilter.FILTER_REJECT;
        }
    }
);

const comments = [];
while (treeWalker.nextNode()) {
    comments.push(treeWalker.currentNode);
}

 
const treeWalker = document.createTreeWalker(    testTemplate.content,    NodeFilter.SHOW_ALL,    {        acceptNode(node) {            if (node.nodeType === Node.COMMENT_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_COMMENT ); const comments = []; while (treeWalker.nextNode()) { comments.push(treeWalker.currentNode); }
const treeWalker = document.createTreeWalker(
testTemplate.content,
NodeFilter.SHOW_COMMENT
);

const comments = [];
while (treeWalker.nextNode()) {
comments.push(treeWalker.currentNode);
}
TreeWalker with manual filter
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_COMMENT ); const comments = []; let node; while (node = treeWalker.nextNode()) { if (node.nodeType === Node.COMMENT_NODE) comments.push(node); }
const treeWalker = document.createTreeWalker(
testTemplate.content,
NodeFilter.SHOW_COMMENT
);

const comments = [];
let node;
while (node = treeWalker.nextNode()) {
if (node.nodeType === Node.COMMENT_NODE)
comments.push(node);
}

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
TreeWalker with manual filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 107 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Traverse function	79054.7 Ops/sec
NodeIterator with filter function	10848.6 Ops/sec
NodeIterator with filter param	585815.9 Ops/sec
TreeWalker with filter function	30495.9 Ops/sec
TreeWalker with filter param	636782.2 Ops/sec
TreeWalker with manual filter	307164.8 Ops/sec

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

Let's dive into the benchmark and explain what's being tested.

The benchmark is designed to compare the performance of four different ways to traverse a DOM tree: using a for loop, NodeIterator, TreeWalker, and a manual filter with TreeWalker. The goal is to identify which approach is the fastest.

Here's a brief overview of each method:

Traverse function: This approach uses a custom traverse function that takes a node and an optional callback function as arguments. The function recursively traverses the DOM tree, calling the callback function on each node.
NodeIterator with filter function: This approach creates a NodeIterator object that filters out nodes based on a provided function. The iterator is then used to traverse the DOM tree.
TreeWalker with filter param: This approach creates a TreeWalker object that starts at the root of the DOM tree and walks down the tree, applying a filter function to each node. However, instead of using a callback function, it uses a manual loop to process the nodes.
TreeWalker with manual filter: This is similar to the previous approach, but instead of using a for loop, it manually loops through the nodes and applies the filter.

The benchmark measures the performance of each approach by executing each test 10 times and reporting the average number of executions per second (ExecutionsPerSecond) for each browser instance.

Now, let's analyze the results:

Traverse function: This approach is the slowest, likely due to the overhead of creating a custom traverse function.
NodeIterator with filter param and TreeWalker with filter param: These approaches are relatively fast, possibly because they leverage the optimized filtering mechanisms built into the DOM API.
TreeWalker with manual filter: This approach is surprisingly slow compared to the other two. It's likely that the manual loop overhead outweighs any potential benefits of using a for loop.

Based on these results, it appears that using a custom iterator or walker with a filter function is generally faster than writing your own traversal logic using a for loop. However, the performance difference between NodeIterator and TreeWalker is relatively small.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The benchmark is designed to compare the performance of four different ways to traverse a DOM tree: using a `for` loop, `NodeIterator`, `TreeWalker`, and a manual filter with `TreeWalker`. The goal is to identify which approach is the fastest.

Here's a brief overview of each method:

1. **Traverse function**: This approach uses a custom `traverse` function that takes a node and an optional callback function as arguments. The function recursively traverses the DOM tree, calling the callback function on each node.
2. **NodeIterator with filter function**: This approach creates a `NodeIterator` object that filters out nodes based on a provided function. The iterator is then used to traverse the DOM tree.
3. **TreeWalker with filter param**: This approach creates a `TreeWalker` object that starts at the root of the DOM tree and walks down the tree, applying a filter function to each node. However, instead of using a callback function, it uses a manual loop to process the nodes.
4. **TreeWalker with manual filter**: This is similar to the previous approach, but instead of using a `for` loop, it manually loops through the nodes and applies the filter.

The benchmark measures the performance of each approach by executing each test 10 times and reporting the average number of executions per second (ExecutionsPerSecond) for each browser instance.

Now, let's analyze the results:

* **Traverse function**: This approach is the slowest, likely due to the overhead of creating a custom `traverse` function.
* **NodeIterator with filter param** and **TreeWalker with filter param**: These approaches are relatively fast, possibly because they leverage the optimized filtering mechanisms built into the DOM API.
* **TreeWalker with manual filter**: This approach is surprisingly slow compared to the other two. It's likely that the manual loop overhead outweighs any potential benefits of using a `for` loop.

Based on these results, it appears that using a custom iterator or walker with a filter function is generally faster than writing your own traversal logic using a `for` loop. However, the performance difference between `NodeIterator` and `TreeWalker` is relatively small.

Related benchmarks: