Benchmark: TreeWalker for loop vs querySelectorAll (* )

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 ); const list = []; for(let element; element; element = treeWalker.nextNode()) { list.push(element); }
querySelectorAll
const list = document.body.querySelectorAll('*');

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

TreeWalker

5.9M/s

querySelectorAll

2.6M/s

Fastest: TreeWalker (2.3x faster)

View exact numbers

✓ TreeWalker: 5,856,998 ops/sec
• querySelectorAll: 2,580,535 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year ago)

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

TreeWalker

11.2M/s

querySelectorAll

3.3M/s

View exact numbers

Test name	Executions per second
✓ TreeWalker	11,208,603 Ops/sec
querySelectorAll	3,281,574 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is tested on the provided JSON?**

The benchmark tests two different ways to iterate over HTML elements in JavaScript: using `TreeWalker` and `querySelectorAll(* )`.

**Options compared:**

1. **TreeWalker**: This option uses a custom iterator (`TreeWalker`) to traverse the DOM tree and select only element nodes (`NodeFilter.SHOW_ELEMENT`). It's a more explicit way to iterate over elements, but might be slower due to the overhead of creating a new walker.
2. **querySelectorAll(* )**: This option uses the `querySelectorAll` method with a wildcard selector (`*`) to select all HTML elements on the page. It's a more concise and often faster way to get an array of element nodes.

**Pros and Cons:**

* **TreeWalker**:
	+ Pros:
		- More explicit control over the iteration process
		- Can be useful for complex DOM traversal scenarios
	+ Cons:
		- Might be slower due to the overhead of creating a new walker
		- Requires more code to set up and manage the iterator
* **querySelectorAll(* )**:
	+ Pros:
		- Faster execution speed (often comparable to native array iteration)
		- More concise and readable code
	+ Cons:
		- Less explicit control over the iteration process
		- May not be suitable for complex DOM traversal scenarios

**Library:**

* **NodeFilter**: This is a W3C standard library that provides an interface for filtering nodes in the DOM tree. In this benchmark, it's used to filter out non-element nodes when using `TreeWalker`.

**Special JS feature/syntax:**

None mentioned in the provided code.

**Other considerations:**

When choosing between these two options, consider the specific requirements of your project:

* If you need more control over the iteration process or are working with complex DOM traversal scenarios, `TreeWalker` might be a better choice.
* If you're looking for a faster and more concise way to iterate over elements, `querySelectorAll(* )` is likely a better option.

**Other alternatives:**

In addition to these two options, there are other ways to iterate over HTML elements in JavaScript:

* **forEach()**: This method iterates over the elements of an array (or an HTMLCollection) and executes a callback function for each element.
* **for...of loop**: This is a newer iteration syntax that's similar to `forEach()` but provides more flexibility and control.

These alternatives might be useful in specific scenarios, but they're not directly comparable to `TreeWalker` and `querySelectorAll(* )` in terms of performance or code conciseness.

TreeWalker for loop vs querySelectorAll (* ) (version: 0)

Comparing performance of: `TreeWalker vs querySelectorAll`

Created: 4 years ago by: Guest

Go to the latest result

TreeWalker

querySelectorAll

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

TreeWalker for loop vs querySelectorAll (* ) (version: 0)

Comparing performance of: TreeWalker vs querySelectorAll

Created: 4 years ago by: Guest

Go to the latest result

TreeWalker

querySelectorAll

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `TreeWalker vs querySelectorAll`