Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createNodeIterator vs walkTheDom v2
(version: 1)
Testing creating a collection of textNodes
Comparing performance of:
document.createNodeIterator vs walkTheDom
Created:
3 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
document.createNodeIterator
walkTheDom
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**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.
Related benchmarks:
Class vs ID
Copy of TreeWalker vs querySelectorAll (* all elements)
TreeWalker vs querySelectorAll vs NodeIterator --2
Proxy overhead test vs classes
Comments
Confirm delete:
Do you really want to delete benchmark?