Benchmark: TreeWalker vs querySelectorAll (* all elements) hgfcyghj

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

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

Browser/OS: Firefox 135 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
TreeWalker	1135913.1 Ops/sec
querySelectorAll	1294572.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The provided benchmark compares two approaches for traversing and selecting DOM elements in a web page using JavaScript: `TreeWalker` and `querySelectorAll`. Here’s a breakdown of the benchmark and the features being compared:

### Approaches Compared

1. **TreeWalker**
   - **Benchmark Definition**:
     ```javascript
     const treeWalker = document.createTreeWalker(
       document.body,
       NodeFilter.SHOW_ELEMENT
     );
     
     const list = [];
     let element;
     while (element = treeWalker.nextNode()) {
         list.push(element);
     }
     ```
   - **Description**: In this approach, a `TreeWalker` is created, which is an API for traversing the DOM tree. The walker filters for all element nodes (`NodeFilter.SHOW_ELEMENT`) and iteratively retrieves each node using `nextNode()`, collecting them into an array.

2. **querySelectorAll**
   - **Benchmark Definition**:
     ```javascript
     const list = [...document.body.querySelectorAll('*')];
     ```
   - **Description**: This method selects all elements in the DOM by leveraging the CSS selector syntax, returning a static NodeList. The spread operator (`...`) converts this NodeList into an array.

### Performance Results
- **TreeWalker**: 669,494.375 executions per second
- **querySelectorAll**: 193,499.421875 executions per second

### Pros and Cons

#### TreeWalker
- **Pros**:
  - **Efficiency**: The results show that it significantly outperformed `querySelectorAll` in this benchmark.
  - **Flexibility**: Allows for more controlled traversal through the DOM tree. You can implement custom filtering and handling logic, if needed.
  - **Incremental Loading**: You can fetch elements one at a time (lazy loading), which may be beneficial for large DOM trees.

- **Cons**:
  - **Complexity**: Can be slightly more complex to implement than a simple selector query.
  - **Limited to Current Context**: You may need to manage context if traversing multiple branches of the DOM.

#### querySelectorAll
- **Pros**:
  - **Simplicity**: Very straightforward to use. It's easy to read and write, making it great for quick selections.
  - **Wide Range of Selectors**: Supports any valid CSS selector, making it versatile for various selection scenarios.

- **Cons**:
  - **Performance**: As shown in the benchmark, it is slower than `TreeWalker`.
  - **Static NodeList**: The returned NodeList is not live; it doesn't update automatically with changes in the DOM.

### Other Considerations
- **Alternatives**: 
  - **getElementsByTagName**: Selects elements based on the tag name and returns a live HTMLCollection, which may be faster than both options but is limited to tag-based selection.
  - **getElementsByClassName**: Similar to getElementsByTagName but retrieves elements based on their CSS class names, also returning a live collection.
  - **forEach(…)** on the NodeList returned by `querySelectorAll`: This allows for iterating through elements but can incur an additional overhead due to the conversion process.

### Conclusion
The benchmark reveals that `TreeWalker` is significantly more efficient for traversing the DOM in this particular setup, making it a better choice for high-performance scenarios where numerous DOM elements need to be processed. On the other hand, `querySelectorAll` remains an excellent option for its ease of use and versatile selection capabilities, particularly when performance is not a critical concern.

Related benchmarks:

TreeWalker vs querySelectorAll (* all elements) hgfcyghj (version: 1)

Comparing performance of: TreeWalker vs querySelectorAll

Created: one year 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 gpt-4o-mini, generated one year ago):