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

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, function(node) { return (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:

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

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
TreeWalker	2182569.2 Ops/sec
querySelectorAll	1822538.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark tests two approaches for selecting elements from an HTML document: using a `TreeWalker` (specifically, `NodeFilter.SHOW_ELEMENT`) versus using `querySelectorAll`.

**Test Cases**

There are two test cases:

1. **TreeWalker**: This test case uses the `document.createTreeWalker()` method to iterate over the elements in the `body` element of the HTML document. It filters out non-H1 elements and assigns a class name "new Class" to each remaining H1 element.
2. **querySelectorAll**: This test case uses the `querySelectorAll()` method to select all H1 elements within the `body` element of the HTML document. It then iterates over the selected elements, assigning a class name "new Class" to each one.

**Library and Purpose**

In both test cases, the `NodeFilter` object is used to specify filtering criteria for the `TreeWalker`. Specifically:

* `NodeFilter.SHOW_ELEMENT`: This constant specifies that only element nodes should be returned by the `Tree Walker`.
* `NodeFilter.FILTER_ACCEPT`: When a node matches this filter, it means we accept the node as part of our traversal.
* `NodeFilter.FILTER_REJECT`: Conversely, when a node doesn't match this filter, it's rejected and skipped.

**Special JS Feature or Syntax**

None mentioned in the benchmark definition. However, note that both test cases use modern JavaScript features:

* Template literals (e.g., `\r\n  const treeWalker = document.createTreeWalker(\r\n  ...`)
* Arrow functions (`function(node) { ... }`)

**Pros and Cons of Different Approaches**

Here are some pros and cons of each approach:

* **TreeWalker**
	+ Pros:
		- More control over the traversal process (e.g., filtering nodes, handling errors)
		- Can be more efficient for large datasets since it only loads necessary nodes
	+ Cons:
		- Can be slower due to the explicit iteration and node filtering steps
		- May require more memory due to the additional data structures used by `NodeFilter`
* **querySelectorAll**
	+ Pros:
		- Faster execution speed, as it uses a optimized internal algorithm
		- More convenient for simple selections (e.g., selecting all H1 elements)
	+ Cons:
		- Less control over the traversal process (no explicit iteration and filtering)
		- May load unnecessary nodes or data structures if not used carefully

**Other Considerations**

* **Performance**: The performance difference between these two approaches may vary depending on the specific use case, HTML structure, and other factors.
* **Memory Usage**: `TreeWalker` may consume more memory due to the additional data structures used by `NodeFilter`, while `querySelectorAll` uses a more compact internal representation.
* **Code Readability and Maintainability**: The choice between these two approaches can affect code readability and maintainability. Some developers might prefer the explicit iteration and filtering of `TreeWalker`, while others might find `querySelectorAll` easier to understand.

**Alternatives**

Other alternatives for selecting elements from an HTML document include:

* `getElementsByClassName()`: Similar to `querySelectorAll`, but returns a live HTMLCollection instead of a NodeList.
* `getElementById()` or `getElementsByTagName()`: Returns the element with the specified ID or tag name, respectively.
* CSS selectors (e.g., `h1`): Uses CSS selectors to select elements based on their attributes and structure.

Related benchmarks:

TreeWalker for loop/(filter) vs querySelectorAll (filter ) (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

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