MeasureThat.net

Run results for: TreeWalker vs querySelectorAll (* all elements)

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Chrome 134
Windows
Desktop
25 days ago
Test name Executions per second
TreeWalker 867365.9 Ops/sec
querySelectorAll 1939394.1 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 treeWalker = document.createTreeWalker(
      document.body,
      NodeFilter.SHOW_ELEMENT
    );
    ​
    const list = [];
    let element;
    while (element = treeWalker.nextNode()) {
        list.push(element);
    }

  • querySelectorAll

     
    const list = document.body.querySelectorAll('*');