Benchmark: TreeWalker vs querySelectorAll (* all elements)2

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 -->

Script Preparation code:

const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT
);

Tests:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
TreeWalker	12114138.0 Ops/sec
querySelectorAll	2747790.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this specific benchmark.

**Benchmark Description**

The benchmark, titled "TreeWalker vs querySelectorAll (* all elements)2", is designed to compare the performance of two methods for traversing an HTML document: `NodeFilter.SHOW_ELEMENT` tree walker (`TreeWalker`) and the `querySelectorAll('*')` method.

**Script Preparation Code**

The script preparation code creates a `TreeWalker` object, which is then used to traverse the document body. The tree walker is set to show only elements using the `NodeFilter.SHOW_ELEMENT` filter.

**Html Preparation Code**

The HTML preparation code defines three identical article elements with headings and paragraphs inside them. This setup allows for a large number of elements to be traversed, making it an ideal benchmarking scenario.

**Individual Test Cases**

There are two individual test cases:

1. **TreeWalker**: This test case uses the `TreeWalker` object to traverse the document body and push each element into a list.
2. **querySelectorAll**: This test case uses the `querySelectorAll('*')` method to select all elements in the document body.

**Options Compared**

The two options being compared are:

*   `NodeFilter.SHOW_ELEMENT` tree walker (`TreeWalker`)
*   `querySelectorAll('*')`

**Pros and Cons of Each Approach**

### TreeWalker

Pros:

*   More fine-grained control over traversal
*   Can be more efficient for certain types of traversals (e.g., when only specific nodes need to be processed)

Cons:

*   Requires manual iteration using the `nextNode()` method, which can lead to slower performance compared to native methods
*   May have additional overhead due to the need to manually manage node iteration

### querySelectorAll('*')

Pros:

*   Native method implementation with built-in optimizations for performance
*   Simple and straightforward syntax

Cons:

*   Less control over traversal behavior
*   May not perform as well on certain types of documents or when dealing with a large number of elements

**Library and Purpose**

The `querySelectorAll('*')` method is a native JavaScript method that selects all elements in the document body that match the specified selector. The purpose of this method is to provide an efficient way to select multiple elements based on a common attribute, class, or ID.

**Special JS Feature/Syntax**

None mentioned in this benchmark

**Other Alternatives**

Other alternatives for traversing HTML documents include:

*   `getElementsByClassName()` or `getElementsByTagName()`: These methods can be used to select elements based on specific classes or tags. However, they may not perform as well as the native `querySelectorAll('*')` method.
*   `DOMParser.parseFromString()`: This method allows for parsing an HTML string into a document object model (DOM) tree. While it provides more control over traversal, it can be slower than native methods and is generally used for parsing HTML strings rather than traversing existing documents.

Keep in mind that the choice of traversal method ultimately depends on the specific requirements and constraints of your project.

**Benchmarking Considerations**

When benchmarking JavaScript performance, consider factors such as:

*   Document size and complexity
*   Number of elements being traversed
*   Browser and platform variations
*   Garbage collection and other system overhead

By understanding these considerations and carefully selecting the right traversal method for your use case, you can optimize your JavaScript code for better performance.

Related benchmarks:

TreeWalker vs querySelectorAll (* all elements)2 (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):