Benchmark: TreeWalker vs querySelectorAll (* all elements)

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

Historical Performance Data aggregated from 49 community runs

Desktop Results:

Chrome 38 runs

querySelectorAll

2.6M/s

TreeWalker

1.3M/s

Fastest: querySelectorAll (2.0x faster)

View exact numbers

✓ querySelectorAll: 2,568,864 ops/sec
• TreeWalker: 1,258,404 ops/sec

Firefox 6 runs

querySelectorAll

1.9M/s

TreeWalker

720K/s

Fastest: querySelectorAll (2.7x faster)

View exact numbers

✓ querySelectorAll: 1,908,382 ops/sec
• TreeWalker: 719,572 ops/sec

Mobile Results:

Chrome 5 runs

querySelectorAll

1.4M/s

TreeWalker

713K/s

Fastest: querySelectorAll (1.9x faster)

View exact numbers

✓ querySelectorAll: 1,385,974 ops/sec
• TreeWalker: 712,642 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: 19 days ago)

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

Browser/OS: Chrome 150 on Windows

View result in a separate tab

querySelectorAll

3.3M/s

TreeWalker

1.8M/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll	3,282,360 Ops/sec
TreeWalker	1,805,089 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 benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark compares two approaches: `treeWalker` (NodeIterator) and `querySelectorAll`. Both methods are used to select elements from an HTML document, but they differ in their approach.

**TreeWalker (`nodeIterator`)**

`TreeWalker` is a built-in JavaScript API that allows you to traverse an XML or HTML document. It's used to iterate over the child nodes of a node, and it provides more control over the traversal process compared to `querySelectorAll`.

The benchmark creates a `TreeWalker` instance on the `document.body` element, filtering only elements (`NodeFilter.SHOW_ELEMENT`). The test then iterates over the selected elements using the `nextNode()` method, pushing each element onto an array.

**querySelectorAll**

`querySelectorAll` is a CSS selector-based API that allows you to select multiple elements from an HTML document. It returns a live HTMLCollection, which is a collection of nodes that can be traversed like an array.

In this benchmark, `querySelectorAll` is used to select all elements (`*`) from the `document.body`. The test then assigns the result to a variable and does nothing with it (i.e., no iteration or processing).

**Pros and Cons**

Here are some pros and cons of each approach:

**TreeWalker (`nodeIterator`)**

Pros:

* More control over the traversal process
* Can be more efficient for large documents, as it only processes elements that match the filter

Cons:

* More complex to use, especially for simple use cases
* May not be suitable for all types of HTML documents (e.g., some HTML5 features may not be supported)

**querySelectorAll**

Pros:

* Simple and easy to use
* Suitable for most HTML documents
* Fast and efficient for small documents

Cons:

* Less control over the traversal process
* May not be suitable for large documents or complex filtering requirements

**Other Considerations**

The benchmark uses a simple HTML document with multiple article elements, which may not accurately represent real-world scenarios. In a real-world scenario, you might want to consider factors like document size, complexity, and caching.

Additionally, the `TreeWalker` approach may require more CPU cycles due to the need for iteration over each node, whereas `querySelectorAll` can take advantage of browser caching and optimization techniques.

**Library/Module Used**

None are explicitly mentioned in this benchmark. However, NodeIterator is a built-in JavaScript API.

**Special JS Feature/Syntax**

There doesn't seem to be any special JavaScript features or syntax used in this benchmark. The tests appear to use standard JavaScript APIs.

**Alternatives**

Some alternatives for selecting elements from an HTML document include:

1. `querySelector`: A faster and more convenient alternative to `querySelectorAll`, which selects only one element.
2. `getElementsByClassName`/`getElementsByTagName`: DOM methods that select elements by class name or tag name, respectively.
3. `Array.prototype.slice()`: Can be used to create a shallow copy of an HTMLCollection.

These alternatives may have different performance characteristics and use cases compared to the benchmarked approaches.

TreeWalker vs querySelectorAll (* all elements) (version: 0)

Comparing performance of: `TreeWalker vs querySelectorAll`

Created: 5 years ago by: Registered User

Go to the latest result

TreeWalker

querySelectorAll

Historical Performance Data aggregated from 49 community runs

Desktop Results:

Chrome 38 runs

Firefox 6 runs

Mobile Results:

Chrome 5 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 vs querySelectorAll (* all elements) (version: 0)

Comparing performance of: TreeWalker vs querySelectorAll

Created: 5 years ago by: Registered User

Go to the latest result

TreeWalker

querySelectorAll

Historical Performance Data aggregated from 49 community runs

Desktop Results:

Chrome 38 runs

Firefox 6 runs

Mobile Results:

Chrome 5 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`