Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Traverse Elements in DOM tree 2
(version: 0)
What's the fastest way to find all elements of a certain criteria within a DOM tree?
Comparing performance of:
Manual traversal function vs NodeIterator vs TreeWalker
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="traversal-root"> <div> <div> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> <div><div><div><section></section></div></div></div> </div> <div> <div><section><section><div></div></section></section></div> <div><div><div><div></div></div></div></div> <section><div><div><div></div></div></div></section> </div> <section> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> </section> <div> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> </div> </div> <div> <div> <div><div><section><div></div></section></div></div> <div><div><section><div></div></section></div></div> <div><div><div><div></div></div></div></div> </div> <div> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> <div><div><div><section></section></div></div></div> </div> <div> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> </div> <section> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> <div><div><div><div></div></div></div></div> </section> </div> <section> <section> <section><section><section><section></section></section></section></section> <div><div><div><section></section></div></div></div> <div><section><div><div></div></div></section></div> </section> <section> <div><div><div><section></section></div></div></div> <div><div><div><section></section></div></div></div> <section><div><section><section></section></section></div></section> </section> <div> <div><div><div><section></section></div></div></div> <div><section><div><div></div></div></section></div> <section><div><div><div></div></div></div></section> </div> <div> <div><section><div><div></div></div></section></div> <div><div><div><section></section></div></div></div> <section><div><section><div></div></section></div></section> </div> </section> </div>
Script Preparation code:
window.symbol = Symbol('symbol'); window.traversalRoot = document.getElementById('traversal-root'); for (const el of traversalRoot.getElementsByTagName('section')) { Object.defineProperty(el, window.symbol, { value: {} }); } window.isMatch = function isMatch(element) { return element[symbol] !== undefined; } window.traverse = function traverse(element, callback) { if (isMatch(element)) { callback(element); } else { for (const child of element.children) { traverse(child, callback); } } }; window.traverseNodeIterator = function traverseNodeIterator(initialElement, callback) { const nodeIterator = document.createNodeIterator( initialElement, NodeFilter.SHOW_ELEMENT, (element) => { if (isMatch(element)) { callback(element); return NodeFilter.FILTER_REJECT; } return NodeFilter.FILTER_ACCEPT; } ); while (nodeIterator.nextNode()) {} }; window.traverseTreeWalker = function traverseTreeWalker(initialElement, callback) { const nodeIterator = document.createTreeWalker( initialElement, NodeFilter.SHOW_ELEMENT, (element) => { if (isMatch(element)) { callback(element); return NodeFilter.FILTER_REJECT; } return NodeFilter.FILTER_ACCEPT; } ); while (nodeIterator.nextNode()) {} };
Tests:
Manual traversal function
const results = []; traverse(traversalRoot, function callback(element) { for (const child of element.children) { traverse(child, callback); } results.push(element); })
NodeIterator
const results = []; traverseNodeIterator(traversalRoot, function callback(element) { for (const child of element.children) { traverseNodeIterator(child, callback); } results.push(element); })
TreeWalker
const results = []; traverseTreeWalker(traversalRoot, function callback(element) { for (const child of element.children) { traverseTreeWalker(child, callback); } results.push(element); })
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Manual traversal 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):
I'll take a moment to collect my thoughts before providing an answer. It seems that you're presenting a rather unusual and complex data structure, consisting of nested `section` elements with various child elements, including text nodes and other `section` elements. You've also provided some benchmarking results for three different traversal functions: manual traversal function, NodeIterator, and TreeWalker. To provide an answer, I'd need more context or information about what these data structures represent and how they're being used. However, based on the provided benchmarking results, it appears that the order of operations (manual traversal vs. tree-walking) can significantly impact performance, with manual traversal yielding the highest number of executions per second. If you could provide more information about the use case or application for these data structures and traversal functions, I'd be happy to try and offer a more informed answer.
Related benchmarks:
find vs findIndex (Array prototype methods) with console.log
find vs findIndex (Array prototype methods) - using objects
find vs findIndex vs someeeeeeeeeeeeeeee (Array prototype methods)
find vs findIndex vs some (fork)
Switch/case vs indexOf
Comments
Confirm delete:
Do you really want to delete benchmark?