Benchmark: TreeWalker vs querySelectorAll vs NodeIterator

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 walker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT, ); for (let node = walker.nextNode(), i = 0; node; i++, node= walker.nextNode() ) { node.className = 'classy' ; }
querySelectorAll
const elements = Array.from(document.body.querySelectorAll('*')) for(let el of elements){el.className = 'classy'}
NodeIterator
const walker = document.createNodeIterator( document.body, NodeFilter.SHOW_ELEMENT, ); 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 YaBrowser/25.2.0.0 Safari/537.36

Browser/OS: Yandex Browser 25 on Windows

View result in a separate tab

Test name	Executions per second
TreeWalker	353501.0 Ops/sec
querySelectorAll	171278.8 Ops/sec
NodeIterator	315688.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to traverse and manipulate DOM elements: `TreeWalker`, `querySelectorAll`, and `NodeIterator`. The test case consists of an HTML structure with multiple article elements, each containing a heading and a paragraph.

**Test Case Breakdown**

1. **TreeWalker**: This approach uses the `createTreeWalker` method to create a tree walker that traverses the DOM document body, starting from the root node (`document.body`). The tree walker is configured to show only element nodes (`NodeFilter.SHOW_ELEMENT`) and returns a sequence of nodes on each iteration.
2. **querySelectorAll**: This approach uses the `querySelectorAll` method to select all elements with an asterisk wildcard (*) in the document body, which effectively selects all elements. The resulting NodeList is then iterated over using a `for...of` loop to set the class name of each element to `'classy'`.
3. **NodeIterator**: Similar to TreeWalker, this approach uses the `createNodeIterator` method to create an iterator that traverses the DOM document body, starting from the root node (`document.body`). The iterator is configured to show only element nodes (`NodeFilter.SHOW_ELEMENT`) and returns a sequence of nodes on each iteration.

**Comparison of Approaches**

| Approach | Description | Pros | Cons |
| --- | --- | --- | --- |
| TreeWalker | Directly traverses the DOM using a tree walker | Efficient, as it only visits elements that are actually visible in the DOM | May not work correctly with certain edge cases or complex DOM structures |
| querySelectorAll | Selects all elements in the DOM using a wildcard selector | Simple and efficient, as it uses a pre-existing DOM API method | May be slower than TreeWalker for large documents, as it needs to create a NodeList that includes all elements |
| NodeIterator | Creates an iterator that traverses the DOM | Similar to TreeWalker, but may have slightly different performance characteristics | May not work correctly with certain edge cases or complex DOM structures |

**Library Usage**

* `document.createTreeWalker` and `document.createNodeIterator` are built-in methods of the DOM API, which provides a way to traverse the document tree in a controlled manner.
* `querySelectorAll` is also a part of the DOM API, but it's not as flexible as Tree Walker or Node Iterator, as it only selects elements based on a wildcard selector.

**Special JS Features**

None mentioned in this benchmark.

**Alternatives**

Other approaches to traverse and manipulate DOM elements include:

* `DOMParser`: Can be used to parse HTML documents and extract element nodes.
* `JSoup` (a Java library): Can be used to parse HTML documents and extract element nodes. (Note: Not applicable for JavaScript-only environments)
* Custom implementations using recursive function calls or other algorithms.

In general, the choice of approach depends on the specific requirements of the application, such as performance, simplicity, or flexibility.

Related benchmarks:

TreeWalker vs querySelectorAll vs NodeIterator (version: 0)

Comparing performance of: TreeWalker vs querySelectorAll vs NodeIterator

Created: 3 years ago by: Guest

Jump to the latest result

TreeWalker

querySelectorAll

NodeIterator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):