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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 133 on Android

View result in a separate tab

Test name	Executions per second
TreeWalker	2112508.2 Ops/sec
querySelectorAll	886634.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two different approaches for selecting elements in an HTML document: `TreeWalker` and `querySelectorAll`. The test case creates multiple identical article elements in the DOM, which are then searched using both methods.

**Options Compared**

Two options are compared:

1. **TreeWalker**: A tree walker is a mechanism to traverse and manipulate a Document Object Model (DOM). It allows you to iterate over a document's nodes, filtering out certain types of nodes. In this test case, the `TreeWalker` is used with `NodeFilter.SHOW_ELEMENT` to filter out non-element nodes.
2. **querySelectorAll**: This method returns all elements that match a given CSS selector.

**Pros and Cons**

* **TreeWalker**:
	+ Pros: Can be more efficient for complex DOM structures or when filtering specific node types, as it allows for fine-grained control over the traversal process.
	+ Cons: May have higher overhead due to its need to maintain an internal state machine for filtering nodes, which can make it slower than a simple selector-based approach like `querySelectorAll`.
* **querySelectorAll**:
	+ Pros: Typically faster and more straightforward, as it leverages the browser's optimized CSS engine and caching mechanisms.
	+ Cons: May not perform well on very complex DOM structures or when filtering specific node types.

**Library/Technology Used**

In this test case, no external libraries are used. The `TreeWalker` API is a built-in JavaScript mechanism for traversing the DOM.

**Special JS Feature/Syntax**

The benchmark uses `NodeFilter.SHOW_ELEMENT`, which is a special filter value that allows you to show only element nodes when using a tree walker. This is not a widely known feature, but it's an important one for understanding how tree walkers work in practice.

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* Complexity of your DOM structure: If your document has a simple and relatively small number of elements, `querySelectorAll` might be sufficient. However, if you have complex structures or need fine-grained control over node traversal, `TreeWalker` might be more suitable.
* Performance requirements: If speed is critical, `querySelectorAll` is likely to be faster due to its optimized CSS engine and caching mechanisms.

**Alternatives**

If you're not convinced about the choice between `TreeWalker` and `querySelectorAll`, consider these alternatives:

1. **DOMQuery**: A lightweight DOM query library that provides a simpler API for selecting elements, which might offer better performance than `querySelectorAll`.
2. **Sizzle**: Another popular CSS selector engine that can be used to select elements in a DOM document.
3. **CSSOM**: The CSS Object Model (CSSOM) is another approach to working with the DOM, which provides a more declarative API for querying and manipulating elements.

Ultimately, the choice between these approaches depends on your specific requirements and performance constraints.

Related benchmarks:

TreeWalker vs querySelectorAll * (version: 0)

Comparing performance of: TreeWalker vs querySelectorAll

Created: 3 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):