Benchmark: TreeWalker for loop/(filter) vs querySelectorAll (filter ) 2

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
const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT, () => node.nodeName == "H1" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT , false ); for(let element; element; element = treeWalker.nextNode()) { element.className = 'new Class' }
querySelectorAll
const list = document.body.querySelectorAll('h1'); for(let i = 0, len = list.length ; i < len ; i++){ list[i].className = 'new Class' }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
TreeWalker
querySelectorAll

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of two approaches to filter elements in an HTML document: `TreeWalker` and `querySelectorAll`.

**What is being tested?**

In this benchmark, we have two individual test cases:

1. **TreeWalker**: This test case uses the `TreeWalker` API to traverse the DOM tree and accept only elements with a specific tag name (`H1`). The `nextNode()` method is used to iterate over the nodes in the tree.
2. **querySelectorAll**: This test case uses the `querySelectorAll()` method to select all elements with the tag name `h1` from the document body.

**Options compared**

The benchmark compares the performance of two approaches:

* TreeWalker (with a custom filter function)
* querySelectorAll (with a simple selector)

**Pros and Cons**

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

* **TreeWalker**:
	+ Pros: Allows for fine-grained control over filtering, can be used with a custom filter function to match specific conditions.
	+ Cons: Can be slower than `querySelectorAll` due to the overhead of creating a tree walker object and iterating through nodes.
* **querySelectorAll**:
	+ Pros: Faster and more efficient than TreeWalker, as it uses a compiled CSS selector to select elements.
	+ Cons: Less flexible than TreeWalker, as it only allows for simple selectors.

**Libraries and Features**

There is no external library used in this benchmark. However, the `TreeWalker` API is a built-in feature of the DOM specification.

No special JavaScript features or syntax are being tested in this benchmark.

**Other alternatives**

If you're looking for alternative approaches to filter elements in an HTML document, here are a few options:

* **getElementsByClassName**: This method can be used to select elements based on their class names. However, it's not as flexible as `querySelectorAll` and may have performance issues if the class name is complex.
* **CSS selectors**: CSS selectors can also be used to filter elements in an HTML document. However, they may not provide the same level of control as the `TreeWalker` API or `querySelectorAll`.

**Benchmark Preparation Code**

The benchmark preparation code sets up two HTML documents with three identical `h1` elements each, followed by a script tag that contains one of the test cases.

```javascript
// TreeWalker test case
const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  () => node.nodeName == "H1" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT,
  false
);

for (let element; element; element = treeWalker.nextNode()) {
  element.className = 'new Class';
}

// querySelectorAll test case
const list = document.body.querySelectorAll('h1');
for (let i = 0, len = list.length; i < len; i++) {
  list[i].className = 'new Class';
}
```

Related benchmarks:

TreeWalker for loop/(filter) vs querySelectorAll (filter ) 2 (version: 0)

Comparing performance of: TreeWalker vs querySelectorAll

Created: 4 years ago by: Guest

Jump to the latest result

TreeWalker

querySelectorAll

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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