Benchmark: Copy of 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 ); 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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare two approaches for retrieving all elements on a web page:

1. **`querySelectorAll('*')`**: This method uses the `querySelectorAll()` function, which returns a NodeList containing all elements that match the specified selector.
2. **TreeWalker (`document.createTreeWalker()`)**: This approach uses a TreeWalker to traverse the DOM tree and collect all elements.

**What's being tested?**

The benchmark is testing the performance of these two approaches on different browsers (Chrome 99) and devices (Desktop).

**Options compared**

The benchmark is comparing:

* **`querySelectorAll('*')`**: The first option uses `querySelectorAll()` with a wildcard selector (`'*'`) to get all elements.
* **TreeWalker (`document.createTreeWalker()`)**: The second option uses TreeWalker to traverse the DOM tree and collect all elements.

**Pros and Cons of each approach**

**`querySelectorAll('*')`:**

Pros:

* Fast and efficient
* Wide browser support

Cons:

* May return duplicate elements if there are multiple elements with the same selector
* Can be less flexible than other selectors, such as `querySelector()` or `querySelectorAll()`

TreeWalker (`document.createTreeWalker()`) :

Pros:

* More flexible than `querySelectorAll()`, allowing for more specific selectors
* Can return unique elements

Cons:

* May be slower due to the overhead of traversing the DOM tree
* Requires more code and setup compared to `querySelectorAll()`

**Library used**

In this benchmark, no specific library is mentioned. However, in general, TreeWalker is a built-in browser API for navigating the DOM tree.

**Special JS features or syntax**

There are no special JavaScript features or syntax mentioned in the provided benchmark.

**Other considerations**

* **Browser support**: The benchmark only includes Chrome 99 and may not be representative of other browsers.
* **Device platform**: The benchmark is only tested on Desktop devices, which may affect performance.
* **DOM structure**: The benchmark's DOM structure is designed to contain multiple `article` elements with similar selectors, which can impact the performance comparison.

**Alternatives**

Other alternatives for retrieving all elements on a web page include:

* Using `document.body.querySelectorAll()` with a more specific selector, such as `document.body.querySelectorAll('.class')`
* Using a library like jQuery or vanilla JavaScript libraries (e.g., `$()`, `$.each()`) to simplify the process
* Using a different traversal approach, such as using `Array.from()` and `element.matches()`

Related benchmarks:

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

Comparing performance of: TreeWalker vs querySelectorAll

Created: 4 years ago by: Guest

Jump to the latest result

TreeWalker

querySelectorAll

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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