Benchmark: TreeWalker/ filter vs querySelectorAll vs NodeIterator /filter

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 filter = function(node) { return node.tagName == "H1" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; }; const walker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT, filter, false ); for (let node = walker.nextNode(), i = 0; node; i++, node= walker.nextNode() ) { node.className = 'classy' ; }
querySelectorAll
const elements = Array.from(document.body.querySelectorAll('h1')) for(let el of elements){el.className = 'classy'}
NodeIterator
const filter = function(node) { return node.tagName == "H1" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; }; const walker = document.createNodeIterator( document.body, NodeFilter.SHOW_ELEMENT, filter, false ); for (let node = walker.nextNode(), i = 0; node; i++, node= walker.nextNode() ) { node.className = 'classy' ; }

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

querySelectorAll

735K/s

TreeWalker

196K/s

NodeIterator

187K/s

Fastest: querySelectorAll (3.9x faster)

View exact numbers

✓ querySelectorAll: 735,159 ops/sec
• TreeWalker: 196,298 ops/sec
• NodeIterator: 186,587 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
TreeWalker
querySelectorAll
NodeIterator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

querySelectorAll

431K/s

TreeWalker

188K/s

NodeIterator

176K/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll	430,997 Ops/sec
TreeWalker	187,703 Ops/sec
NodeIterator	175,813 Ops/sec

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 is being tested.

The benchmark compares three different approaches to select HTML elements:

1. **TreeWalker**: This approach uses a TreeWalker API, which traverses an XML or HTML document tree by walking from one node to its child nodes. The `createTreeWalker` method creates a walker that iterates over the body element's children, filtering out non-H1 elements using a filter function.
2. **querySelectorAll**: This approach uses the `querySelectorAll` method to select all H1 elements within the document body and then iterates over the resulting array to apply a class name to each element.
3. **NodeIterator**: This approach also uses an iterator (NodeIterator) to traverse the document tree, similar to TreeWalker. However, instead of filtering out non-H1 elements directly in the filter function, it's done within the NodeIterator callback.

Now, let's discuss the pros and cons of each approach:

**TreeWalker**

Pros:

* **Efficient**: TreeWalker is optimized for traversing large document trees and can be faster than other approaches.
* **Flexibility**: It allows for custom filtering and traversal logic.

Cons:

* **Complexity**: The filter function can be complex, especially when dealing with multiple conditions or edge cases.
* **Browser support**: Although widely supported, some older browsers might not have implemented the TreeWalker API correctly.

**querySelectorAll**

Pros:

* **Simple**: This approach is straightforward and easy to implement, making it accessible to developers without extensive DOM knowledge.
* **Browser support**: `querySelectorAll` has been a standard feature since CSS 2.1, ensuring broad browser support.

Cons:

* **Performance overhead**: Using `querySelectorAll` can lead to slower performance due to the need for an array of elements, which can be processed sequentially.

**NodeIterator**

Pros:

* **Similarity to TreeWalker**: NodeIterator provides a similar traversal experience to TreeWalker, with the added benefit of custom filtering logic directly within the iterator callback.
* **Efficient**: Like TreeWalker, it's optimized for performance.

Cons:

* **Less flexible**: The filter function is limited to the scope of the iterator callback, making it less flexible than TreeWalker.

As for other alternatives, there are a few more approaches you could consider when selecting HTML elements:

1. `querySelector` vs `getElementsByTagName`: `querySelector` is generally faster and more efficient than `getElementsByTagName`, especially for complex queries.
2. `getElementsByClassName`: This method can be useful when working with multiple classes on an element.

In summary, the choice of approach depends on your specific requirements, such as performance considerations, flexibility needs, and browser support.

TreeWalker/ filter vs querySelectorAll vs NodeIterator /filter (version: 0) Benchmark.js

Comparing performance of: `TreeWalker vs querySelectorAll vs NodeIterator`

Created: 4 years ago by: Guest

Go to the latest result

TreeWalker

querySelectorAll

NodeIterator

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

TreeWalker/ filter vs querySelectorAll vs NodeIterator /filter (version: 0) Benchmark.js

Comparing performance of: TreeWalker vs querySelectorAll vs NodeIterator

Created: 4 years ago by: Guest

Go to the latest result

TreeWalker

querySelectorAll

NodeIterator

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `TreeWalker vs querySelectorAll vs NodeIterator`