Benchmark: treeWalker param vs treefalker with filter function vs querySelectorAll

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 with param
const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT ); const list = []; while (treeWalker.nextNode()) { list.push(treeWalker.currentNode); }
treeWalker with filter function
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_ALL, { acceptNode(node) { if (node.nodeType === Node.ELEMENT_NODE | Node.TEXT_NODE) { return NodeFilter.FILTER_ACCEPT; } return NodeFilter.FILTER_REJECT; } } ); const list = []; while (treeWalker.nextNode()) { list.push(treeWalker.currentNode); }
querySelectorAll
const list = document.body.querySelectorAll('*');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
treeWalker with param
treeWalker with filter function
querySelectorAll

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Overview**

The benchmark tests three different ways to traverse and retrieve elements from an HTML document: using `document.createTreeWalker` with a parameter, using `treeWalker` with a filter function, and using `querySelectorAll`.

**Options Compared**

1. **`document.createTreeWalker` with a parameter**: This method takes the root node of the document (in this case, the `body` element) and an optional parameter specifying which type of nodes to consider (`NodeFilter.SHOW_ELEMENT`). It returns a tree walker object that allows iterating over the nodes in the document.
2. **`treeWalker` with filter function**: This method creates a tree walker object just like the first option, but instead of passing a node filter, it passes an anonymous function (`acceptNode`) that defines how to filter nodes based on their type and other criteria.
3. **`querySelectorAll`**: This is a static method of the `Document` interface that returns all elements matching a CSS selector.

**Pros and Cons**

1. **`document.createTreeWalker` with a parameter**:
	* Pros: More flexible, as you can control which node types to consider.
	* Cons: Requires more manual effort to set up and iterate over nodes.
2. **`treeWalker` with filter function**:
	* Pros: Concise and expressive code, as the filter logic is defined in a single place.
	* Cons: Less flexible than the first option, as you're limited by the specific node types accepted by the filter function.
3. **`querySelectorAll`**:
	* Pros: Simple and concise, often sufficient for basic use cases.
	* Cons: May not be suitable for complex document structures or performance-critical applications.

**Library and Special JS Feature**

In this benchmark, `NodeFilter` is a built-in JavaScript API that allows filtering nodes based on their type and other criteria. It's used in the first two options to control which node types are considered by the tree walker.

No special JavaScript features or syntax are used in this benchmark beyond what's described above.

**Alternatives**

Other alternatives for traversing and retrieving elements from an HTML document include:

1. **`querySelector`**: Similar to `querySelectorAll`, but only returns the first matching element.
2. **`getElementsByClassName`** or **`getElementsByTagName`**: These methods return a live HTMLCollection of elements with the specified class name or tag name, respectively.
3. **`Array.from()` and `Document.querySelectorAll()`: This method creates an array-like object from a live HTMLCollection returned by `querySelectorAll`.
4. **Manual DOM traversal**: You can use techniques like CSS selectors, XPath expressions, or plain DOM iteration to traverse the document tree.

In general, the choice of approach depends on your specific requirements, performance needs, and the complexity of your document structure.

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 86 on Windows 7

View result in a separate tab

Test name	Executions per second
treeWalker with param	403518.0 Ops/sec
treeWalker with filter function	0.0 Ops/sec
querySelectorAll	964592.0 Ops/sec

Related benchmarks:

treeWalker param vs treefalker with filter function vs querySelectorAll (version: 0)

Comparing performance of: treeWalker with param vs treeWalker with filter function vs querySelectorAll

Created: 4 years ago by: Guest

Jump to the latest result

treeWalker with param

treeWalker with filter function

querySelectorAll

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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