Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
Traverse function vs NodeIterator vs TreeWalker
Let's compare the speed of 3 different ways to traverse the DOM.
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=519614" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Linux; Android 5.1; OPPO F1S) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Mobile Safari/537.36
Browser:
Chrome Mobile 95
Operating system:
Android 5.1
Device Platform:
Mobile
Date tested:
2 years ago
TreeWalker with filter param
57K/s
NodeIterator with filter param
49K/s
Traverse function
7K/s
TreeWalker with filter function
4K/s
NodeIterator with filter function
1K/s
View exact numbers
Test name
Executions per second
✓
TreeWalker with filter param
57,374 Ops/sec
NodeIterator with filter param
49,029 Ops/sec
Traverse function
7,237 Ops/sec
TreeWalker with filter function
3,533 Ops/sec
NodeIterator with filter function
1,409 Ops/sec
Script Preparation code:
// language=HTML const html = ` <!-- 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 --> `; const template = document.createElement('template'); template.innerHTML = html; window.testTemplate = template; window.testTraverse = function traverse(node, use) { if (!node) return; use(node); traverse(node.firstChild, use); traverse(node.nextSibling, use); }
Tests:
Traverse function
const comments = []; testTraverse(testTemplate.content.firstChild, node => { if (node.nodeType === Node.COMMENT_NODE) { comments.push(node); } });
NodeIterator with filter function
const nodeIterator = document.createNodeIterator( testTemplate.content, NodeFilter.SHOW_ALL, { acceptNode(node) { if (node.nodeType === Node.COMMENT_NODE) { return NodeFilter.FILTER_ACCEPT; } return NodeFilter.FILTER_REJECT; } } ); const comments = []; while (nodeIterator.nextNode()) { comments.push(nodeIterator.currentNode); }
NodeIterator with filter param
const nodeIterator = document.createNodeIterator( testTemplate.content, NodeFilter.SHOW_COMMENT ); const comments = []; while (nodeIterator.nextNode()) { comments.push(nodeIterator.currentNode); }
TreeWalker with filter function
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_ALL, { acceptNode(node) { if (node.nodeType === Node.COMMENT_NODE) { return NodeFilter.FILTER_ACCEPT; } return NodeFilter.FILTER_REJECT; } } ); const comments = []; while (treeWalker.nextNode()) { comments.push(treeWalker.currentNode); }
TreeWalker with filter param
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_COMMENT ); const comments = []; while (treeWalker.nextNode()) { comments.push(treeWalker.currentNode); }