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

Tests:

treeWalker with param
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); }
querySelectorAll
const list = document.body.querySelectorAll('*');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
treeWalker with param
treeWalker with filter function
querySelectorAll

Fastest: N/A

Slowest: N/A

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

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

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).

Latest run results:

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

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

Browser/OS: Chrome 86 on Windows 7

View result in a separate tab

Test name	Executions per second
treeWalker with param	400988.5 Ops/sec
treeWalker with filter function	7372.1 Ops/sec
querySelectorAll	934566.2 Ops/sec

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

treeWalker with filter function

querySelectorAll

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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