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('*');

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: 6 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
TreeWalker	1081527.9 Ops/sec
querySelectorAll	2362619.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks:

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

Comparing performance of: TreeWalker vs querySelectorAll

Created: 4 years ago by: Registered User

Jump to the latest result

TreeWalker

querySelectorAll

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):