Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
TreeWalker for loop/(filter) vs querySelectorAll (filter )
Go to the benchmark
Embed
Embed Benchmark Result
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Browser:
Chrome 123
Operating system:
Windows
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
TreeWalker
2182569.2 Ops/sec
querySelectorAll
1822538.1 Ops/sec
HTML Preparation code:
<!-- 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 -->
Tests:
TreeWalker
const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT, function(node) { return (node.nodeName == "H1") ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; }, false ); for(let element; element; element = treeWalker.nextNode()) { element.className = 'new Class' }
querySelectorAll
const list = document.body.querySelectorAll('h1'); for(let i = 0, len = list.length ; i < len ; i++){ list[i].className = 'new Class' }