MeasureThat.net

Run results for: TreeWalker vs querySelectorAll vs NodeIterator filters

Go to the benchmark
Run details:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Mobile Safari/537.36
Chrome Mobile 133
Android
Mobile
one month ago
Test name Executions per second
TreeWalker 559347.1 Ops/sec
querySelectorAll 809522.0 Ops/sec
NodeIterator 410099.9 Ops/sec
HTML Preparation code:
​x
 
1
<!-- article out start -->
2
<article>
3
  <!-- article in start -->
4
  <h1>Lorem ipsum</h1>
5
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
6
  <!-- article in end -->
7
</article>
8
<!-- article out end -->
9
​
10
<!-- article out start -->
11
<article>
12
  <!-- article in start -->
13
  <h1>Lorem ipsum</h1>
14
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
15
  <!-- article in end -->
16
</article>
17
<!-- article out end -->
18
​
19
<!-- article out start -->
20
<article>
21
  <!-- article in start -->
22
  <h1>Lorem ipsum</h1>
23
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
24
  <!-- article in end -->
25
</article>
26
<!-- article out end -->
Tests:

  • TreeWalker

     
    const walker = document.createTreeWalker(
      document.body,
      NodeFilter.SHOW_ELEMENT,
    );
    ​
    for (let node = walker.nextNode(), i = 0; 
        node;
        i++, node= walker.nextNode()
        ) {
        if(node.nodeName == 'H1') node.className = 'classy' ;
        
    }
    ​

  • querySelectorAll

     
    const elements = Array.from(document.body.querySelectorAll('h1'))
    for(let i = 0, len = elements.length; i < len; i++){elements[i].className = 'classy'}

  • NodeIterator

     
    const walker = document.createNodeIterator(
      document.body,
      NodeFilter.SHOW_ELEMENT,
    );
    ​
    for (let node = walker.nextNode(), i = 0; 
        node;
        i++, node= walker.nextNode()
        ) {
        node.className = 'classy' ;
    }