Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Traverse function vs NodeIterator vs TreeWalker for Custom Element Search
(version: 0)
Let's compare the speed of 3 different ways to traverse the DOM and shadow DOM, with the goal of finding all custom elements.
Comparing performance of:
Traverse function vs NodeIterator vs TreeWalker
Created:
3 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
// language=HTML const html = ` <body> <h1>Doc with mix of light and shadow DOM custom elements</h1> <p>NOTE: we rely on Chrome's support for "declarative shadow DOM"</p> <x-light id="1"> <!-- comment --> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum deserunt dolor nesciunt ab placeat nostrum. Laborum rem quisquam ullam, officiis maiores fugiat fuga animi quos. Ex earum a alias magni. </x-light> <x-shadow id="2"> <template shadowroot="open"> <!-- comment --> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet error delectus... </p> <slot></slot> </template> <!-- comment --> Impedit nesciunt excepturi perferendis quis in debitis vitae soluta voluptatibus praesentium repellat labore quas. Cum unde consectetur maiores. </x-shadow> <x-light id="3"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum deserunt dolor nesciunt ab placeat nostrum. Laborum rem quisquam ullam, officiis maiores fugiat fuga animi quos. Ex earum a alias magni. <x-light id="3.1"> <span>Lorem ipsum dolor sit amet</span> consectetur adipisicing elit. Rerum deserunt dolor nesciunt ab placeat nostrum. Laborum rem quisquam ullam, officiis maiores fugiat fuga animi quos. Ex earum a alias magni. <x-light id="3.1.1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum deserunt dolor nesciunt ab placeat nostrum. Laborum rem quisquam ullam, officiis maiores fugiat fuga animi quos. Ex earum a alias magni. </x-light> </x-light> </x-light> <x-shadow id="4"> <template shadowroot="open"> <x-shadow id="4.1"> <template shadowroot="open"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet error delectus... <slot></slot> <x-shadow id="4.1.1"> <template shadowroot="open"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet error delectus... <slot></slot> </template> Impedit nesciunt excepturi perferendis quis in debitis vitae soluta voluptatibus praesentium repellat labore quas. Cum unde consectetur maiores. <x-light id="4.1.1.1"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum deserunt dolor nesciunt ab placeat nostrum. Laborum rem quisquam ullam, officiis maiores fugiat fuga animi quos. Ex earum a alias magni. </p> </x-light> </x-shadow> </template> Impedit nesciunt excepturi perferendis quis in debitis vitae soluta voluptatibus praesentium repellat labore quas. Cum unde consectetur maiores. </x-shadow> <slot></slot> </template> <x-shadow id="5"> <template shadowroot="open"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet error delectus... <slot></slot> </template> Impedit nesciunt excepturi perferendis quis in debitis vitae soluta voluptatibus praesentium repellat labore quas. Cum unde consectetur maiores. </x-shadow> </x-shadow> </body> `; const fragment = new DOMParser().parseFromString(html, 'text/html', { includeShadowRoots: true }); document.body.replaceChildren(fragment.body); window.testTraverse = function traverse(node, use) { if (!node) return; use(node); traverse(node.firstChild, use); traverse(node.nextSibling, use); }
Tests:
Traverse function
const customEls = []; const func = node => { if (node.nodeType === Node.ELEMENT_NODE && node.tagName.includes('-')) { customEls.push(node); } if (node.shadowRoot) { testTraverse(node.shadowRoot.firstChild, func) } } testTraverse(document.body.firstChild, func); console.log(customEls)
NodeIterator
function getAllCustomElementsUsingNodeIterator(root = document.body) { const elms = [] let currentNode const nodeIterator = document.createNodeIterator( root, NodeFilter.SHOW_ELEMENT, null ) while ((currentNode = nodeIterator.nextNode())) { if (currentNode.tagName.includes('-')) { elms.push(currentNode) if (currentNode.shadowRoot) { elms.push(...getAllCustomElementsUsingNodeIterator(currentNode.shadowRoot)) } } } return elms } console.log(getAllCustomElementsUsingNodeIterator())
TreeWalker
function getAllCustomElementsUsingTreeWalker(root = document.body) { const elms = [] let currentNode const treeWalker = document.createTreeWalker( root, NodeFilter.SHOW_ELEMENT, null ) while ((currentNode = treeWalker.nextNode())) { if (currentNode.tagName.includes('-')) { elms.push(currentNode) if (currentNode.shadowRoot) { elms.push(...getAllCustomElementsUsingTreeWalker(currentNode.shadowRoot)) } } } return elms } console.log(getAllCustomElementsUsingTreeWalker())
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Traverse function
NodeIterator
TreeWalker
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):
To determine which method is faster, we need to analyze the provided benchmark results. The three test cases are: 1. **Traverse function**: This method uses the `testTraverse` function and is executed 35458 times per second with an average of 54513 executions per second. 2. **NodeIterator**: This method uses the `getAllCustomElementsUsingNodeIterator` function and is executed 49880 times per second with an average of 145258 executions per second (calculated by multiplying the execution rate by the number of iterations). 3. **TreeWalker**: This method uses the `getAllCustomElementsUsingTreeWalker` function and is executed 54513 times per second with an average of 35458 executions per second. Based on these results, the **NodeIterator** method appears to be faster than the other two methods. The NodeIterator approach has a higher execution rate and lower variability compared to the Traverse function and TreeWalker approach.
Related benchmarks:
Traverse function vs NodeIterator vs TreeWalker
Traverse function vs NodeIterator vs TreeWalker1
Traverse function vs NodeIterator vs TreeWalker vs TreeWalker manual filter
NodeIterator vs TreeWalker for Component Extraction (FIXED)
Comments
Confirm delete:
Do you really want to delete benchmark?