Benchmark: createNodeIterator vs walkTheDom v2

HTML Preparation code:

<div class="wrapper">
  <h1 class="heading">Dummy Heading</h1>
  <p class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique itaque repellendus aperiam ullam impedit. Nesciunt dignissimos dicta esse nostrum velit assumenda!</p>
  <h1 class="heading">Dummy Heading</h1>
  <p class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique itaque repellendus aperiam ullam impedit. Nesciunt dignissimos dicta esse nostrum velit assumenda!</p>
  <ul>
    <li>repellendus</li>
    <li>consectetur</li>
    <li>adipisicing</li>
  </ul>
  <button>Click Me</button>
</div>

Tests:

document.createNodeIterator
const getTextNodes = function(root) { const iterator = document.createNodeIterator( root, NodeFilter.SHOW_TEXT, null ) const nodes = [] let currNode while (currNode = iterator.nextNode()) nodes.push(currNode) return nodes } getTextNodes(document.body)
walkTheDom
const walkTheDom = function (node, callback) { callback(node) node = node.firstChild while (node) { walkTheDom(node, callback) node = node.nextSibling } } const getTextNodes = function (root) { const nodes = [] walkTheDom (root, (node) => { if (node.nodeType === 3) nodes.push(node) }) return nodes } getTextNodes(document.body)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
document.createNodeIterator
walkTheDom

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark definition and test cases measure the performance of creating a collection of text nodes using two different approaches: `document.createNodeIterator` and `walkTheDom`.

**Benchmark Definition JSON**

The benchmark definition represents the script that will be executed during the benchmark. It consists of:

* `Name`: A unique name for the benchmark.
* `Description`: A brief description of the benchmark.
* `Script Preparation Code`: The code that sets up the environment before running the benchmark (in this case, null).
* `Html Preparation Code`: The HTML code used to create a sample document with text nodes.

**Individual Test Cases**

There are two test cases:

1. **`document.createNodeIterator`**:
	* This function creates a node iterator over the specified root element and filters only text nodes.
	* It collects all text nodes in an array using a while loop that calls `iterator.nextNode()` until there are no more nodes to iterate over.
2. **`walkTheDom`**:
	* This function recursively traverses the DOM tree starting from the specified node, visiting each child node and calling a callback function for each one.
	* In this case, the callback function checks if the node is a text node (nodeType === 3) and pushes it to an array if so.

**Performance Comparison**

The benchmark compares the performance of these two approaches. The results show that `document.createNodeIterator` is significantly faster than `walkTheDom`, with an execution rate of approximately 395971 executions per second compared to 189112 executions per second for `walkTheDom`.

**Pros and Cons**

* **`document.createNodeIterator`**:
	+ Pros: Fast, efficient, and widely supported.
	+ Cons: May not work as expected if the root element is not a single text node.
* **`walkTheDom`**:
	+ Pros: More flexible and can be used to traverse any part of the DOM tree.
	+ Cons: Slower than `document.createNodeIterator`, may cause performance issues for large documents.

**Library/ Framework Considerations**

None of the provided code uses a specific library or framework that is not built-in to JavaScript. However, if we consider the context of this benchmark, `walkTheDom` might be reminiscent of libraries like jQuery's `.each()` method or similar DOM traversal functions.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in these benchmarks that would require specific knowledge or handling.

**Other Alternatives**

If you need to traverse the DOM tree and create a collection of text nodes, other approaches could include:

* Using `Node.childNodes` instead of `walkTheDom`.
* Utilizing libraries like jQuery or React's `useEffect()` hook.
* Implementing your own recursive function similar to `walkTheDom`, but with optimized performance.

Keep in mind that the best approach will depend on the specific requirements and constraints of your project.

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
document.createNodeIterator	395971.2 Ops/sec
walkTheDom	189112.3 Ops/sec

Related benchmarks:

createNodeIterator vs walkTheDom v2 (version: 1)

Testing creating a collection of textNodes

Comparing performance of: document.createNodeIterator vs walkTheDom

Created: 2 years ago by: Registered User

Jump to the latest result

document.createNodeIterator

walkTheDom

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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