Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
nextSibling function vs TreeWalker
Let's compare the speed of 3 different ways to traverse the DOM.
Go to the benchmark
Embed
Embed Benchmark Result
Run details:
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Browser:
Chrome 144
Operating system:
Mac OS X 10.15.7
Device Platform:
Desktop
Date tested:
2 months ago
Test name
Executions per second
Traverse function
1771257.1 Ops/sec
TreeWalker with filter function
6254928.0 Ops/sec
TreeWalker with filter param
9495912.0 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); } });
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.nextSibling()) { comments.push(treeWalker.currentNode); }
TreeWalker with filter param
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_COMMENT ); const comments = []; while (treeWalker.nextSibling()) { comments.push(treeWalker.currentNode); }