Benchmark: TreeWalker vs querySelectorAll vs NodeIterator filters

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() ) { if(node.nodeName == 'H1') node.className = 'classy' ; }
querySelectorAll
const elements = Array.from(document.body.querySelectorAll('h1')) for(let i = 0, len = elements.length; i < len; i++){elements[i].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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.115 Safari/537.36

Browser/OS: Chrome 104 on Windows

View result in a separate tab

Test name	Executions per second
TreeWalker	120757.4 Ops/sec
querySelectorAll	119297.6 Ops/sec
NodeIterator	38131.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark definition and test cases are designed to measure the performance of three different methods for filtering elements in an HTML document: TreeWalker, querySelectorAll, and NodeIterator.

**TreeWalker**

TreeWalker is an API that allows developers to traverse an DOM tree in a way that's similar to walking through a file system. In this benchmark, we create a TreeWalker instance on the document body with the `NodeFilter.SHOW_ELEMENT` filter, which only considers elements in the traversal. We then iterate over the nodes returned by the walker and add a class name "classy" to all <h1> elements.

**querySelectorAll**

querySelectorAll is an API that allows developers to select multiple elements based on their CSS selectors. In this benchmark, we use the `Array.from()` method to create an array of all <h1> elements in the document body and then iterate over the array, adding a class name "classy" to each element.

**NodeIterator**

NodeIterator is similar to TreeWalker but allows for more flexibility in how nodes are traversed. In this benchmark, we create a NodeIterator instance on the document body with the `NodeFilter.SHOW_ELEMENT` filter and then iterate over the nodes returned by the iterator, adding a class name "classy" to each element.

**Options Compared**

The three methods are compared based on their performance in terms of:

* **Number of executions per second**: This measures how many times each method can execute before the test finishes.
* **Raw UA string and device platform**: These provide information about the browser, operating system, and device type used to run the benchmark.

**Pros and Cons**

Here are some pros and cons for each method:

* **TreeWalker**
	+ Pros: Can traverse complex DOM trees efficiently, doesn't require a separate selection process.
	+ Cons: Can be slower than other methods due to its iterative nature.
* **querySelectorAll**
	+ Pros: Fastest method in this benchmark, doesn't require explicit iteration over nodes.
	+ Cons: May not work well with complex or deeply nested DOM trees.
* **NodeIterator**
	+ Pros: Offers more flexibility in how nodes are traversed, can be faster than TreeWalker for certain use cases.
	+ Cons: Can be slower than querySelectorAll due to its iterative nature.

**Library and Purpose**

In this benchmark, the following libraries/libraries-like APIs are used:

* **Document.createTreeWalker()**: Creates a TreeWalker instance on the document body.
* **Array.from(document.body.querySelectorAll('h1'))**: Uses `querySelectorAll()` to select all <h1> elements in the document body.
* **document.createNodeIterator()**: Creates a NodeIterator instance on the document body.

**Special JS Features**

The benchmark uses the following special JavaScript features:

* **ECMAScript 2015 (ES6) syntax**: Used in the `const` declaration and template literals.
* **Arrow functions**: Used in some of the test cases to simplify code.
* **Spread operator (`...`)**: Used in the `Array.from()` method to create an array.

**Other Alternatives**

Some other methods that could be used for filtering elements include:

* **DOMParser**: Can parse HTML strings and extract element nodes, but is slower than the methods tested here.
* **getElementsByClassName()**: Can select elements based on their class name, but has security implications due to its ability to select multiple elements.
* **queryById()**: Can select elements by their ID attribute, but may not work well with dynamic content.

Overall, the choice of method depends on the specific use case and requirements. TreeWalker is a good option for traversing complex DOM trees, while querySelectorAll is suitable for simple selection tasks. NodeIterator offers more flexibility, but its performance can vary depending on the specific use case.

Related benchmarks:

TreeWalker vs querySelectorAll vs NodeIterator filters (version: 0)

Comparing performance of: TreeWalker vs querySelectorAll vs NodeIterator

Created: 2 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 2 months ago):