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' ; }

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

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
TreeWalker	333454.0 Ops/sec
querySelectorAll	1176346.1 Ops/sec
NodeIterator	292870.1 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.

Related benchmarks:

TreeWalker/ filter vs querySelectorAll vs NodeIterator /filter (version: 0)

Comparing performance of: TreeWalker vs querySelectorAll vs NodeIterator

Created: 4 years ago by: Guest

Jump to the latest result

TreeWalker

querySelectorAll

NodeIterator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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