Benchmark: treeWalker param vs treefalker with filter function vs querySelectorAll edit

HTML Preparation code:

<!-- 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 -->

​x
 
<!-- 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 -->

Tests:

treeWalker with param
const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT ); const list = []; while (treeWalker.nextNode()) { list.push(treeWalker.currentNode); }
const treeWalker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT
);

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

treeWalker with filter function

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

            return NodeFilter.FILTER_REJECT;
        }
    }
);

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

 
const treeWalker = document.createTreeWalker(    document.body,    NodeFilter.SHOW_ALL,    {        acceptNode(node) {            if (node.nodeType === Node.ELEMENT_NODE | Node.TEXT_NODE) {                return NodeFilter.FILTER_ACCEPT;            }​            return NodeFilter.FILTER_REJECT;        }    });​const list = [];while (treeWalker.nextNode()) {    list.push(treeWalker.currentNode);}

querySelectorAll
const list = document.body.querySelectorAll('*');
const list = document.body.querySelectorAll('*');

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
treeWalker with param
treeWalker with filter function
querySelectorAll

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
treeWalker with param	265328.6 Ops/sec
treeWalker with filter function	9579.5 Ops/sec
querySelectorAll	842552.2 Ops/sec

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

Measuring JavaScript performance is crucial for optimizing web applications. Let's break down the provided benchmark and explain what's being tested.

Benchmark Overview

The benchmark compares three approaches to traverse an HTML document:

treeWalker with a parameter (NodeFilter.SHOW_ELEMENT)
treeWalker with a filter function
querySelectorAll

Options Comparison

Here's a brief overview of each option, their pros and cons:

TreeWalker with Param

Description: Traverse the document using a tree walker, filtering only element nodes.
Pros: Faster than other options for simple traversal tasks, as it doesn't require additional function calls or string manipulation.
Cons: Requires passing a parameter (NodeFilter.SHOW_ELEMENT) to specify the filter type, which can be cumbersome.

TreeWalker with Filter Function

Description: Traverse the document using a tree walker, applying a custom filter function to determine node acceptance.
Pros: More flexible than the param-based approach, as it allows for dynamic filtering and handling of complex nodes.
Cons: Slower than the param-based approach due to the overhead of function calls and string manipulation.

QuerySelectorAll

Description: Use the querySelectorAll method to select all elements with a specified selector (in this case, '*').
Pros: Simple and fast, as it leverages the browser's optimized query selector engine.
Cons: Less flexible than tree walker approaches, as it only supports simple selectors.

Library and Purpose

The NodeFilter interface is part of the W3C DOM specification, providing a way to filter nodes during traversal. The treeWalker method returns a tree walker object that can be used to traverse the document. In this benchmark, both options rely on the NodeFilter interface to filter node types.

Special JS Feature or Syntax

There isn't any special JavaScript feature or syntax being tested in this benchmark. However, it's worth noting that the use of treeWalker and querySelectorAll relies on the W3C DOM specification, which is widely supported across modern browsers.

Other Alternatives

Some alternative approaches to traversing an HTML document include:

Using a library like jQuery's .each() method or the Array.prototype.forEach() method
Implementing custom traversal logic using recursive functions or iterative loops

Keep in mind that these alternatives may have performance characteristics different from those of tree walker and query selector approaches.

Benchmark Preparation Code

The benchmark preparation code generates two identical HTML articles with a h1 heading and p element. This allows for accurate testing of each approach's performance, as the same document is traversed using each method.

Individual Test Cases

Each test case includes a brief description and benchmark definition, which outlines the specific implementation details for that particular approach (e.g., treeWalker with param or querySelectorAll).

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial for optimizing web applications. Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares three approaches to traverse an HTML document:

1. `treeWalker` with a parameter (NodeFilter.SHOW_ELEMENT)
2. `treeWalker` with a filter function
3. `querySelectorAll`

**Options Comparison**

Here's a brief overview of each option, their pros and cons:

### TreeWalker with Param

* **Description**: Traverse the document using a tree walker, filtering only element nodes.
* **Pros**: Faster than other options for simple traversal tasks, as it doesn't require additional function calls or string manipulation.
* **Cons**: Requires passing a parameter (NodeFilter.SHOW_ELEMENT) to specify the filter type, which can be cumbersome.

### TreeWalker with Filter Function

* **Description**: Traverse the document using a tree walker, applying a custom filter function to determine node acceptance.
* **Pros**: More flexible than the param-based approach, as it allows for dynamic filtering and handling of complex nodes.
* **Cons**: Slower than the param-based approach due to the overhead of function calls and string manipulation.

### QuerySelectorAll

* **Description**: Use the `querySelectorAll` method to select all elements with a specified selector (in this case, '*').
* **Pros**: Simple and fast, as it leverages the browser's optimized query selector engine.
* **Cons**: Less flexible than tree walker approaches, as it only supports simple selectors.

**Library and Purpose**

The `NodeFilter` interface is part of the W3C DOM specification, providing a way to filter nodes during traversal. The `treeWalker` method returns a tree walker object that can be used to traverse the document. In this benchmark, both options rely on the `NodeFilter` interface to filter node types.

**Special JS Feature or Syntax**

There isn't any special JavaScript feature or syntax being tested in this benchmark. However, it's worth noting that the use of `treeWalker` and `querySelectorAll` relies on the W3C DOM specification, which is widely supported across modern browsers.

**Other Alternatives**

Some alternative approaches to traversing an HTML document include:

* Using a library like jQuery's `.each()` method or the `Array.prototype.forEach()` method
* Implementing custom traversal logic using recursive functions or iterative loops

Keep in mind that these alternatives may have performance characteristics different from those of tree walker and query selector approaches.

**Benchmark Preparation Code**

**Individual Test Cases**

Each test case includes a brief description and benchmark definition, which outlines the specific implementation details for that particular approach (e.g., `treeWalker` with param or querySelectorAll).

Related benchmarks:

treeWalker param vs treefalker with filter function vs querySelectorAll edit (version: 0)

Comparing performance of: treeWalker with param vs treeWalker with filter function vs querySelectorAll

Created: 4 years ago by: Registered User

Jump to the latest result

treeWalker with param