Run details:
Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36
Chrome 86
Windows 7
Desktop
4 years ago
Test name Executions per second
treeWalker with param 400988.5 Ops/sec
treeWalker with filter function 7372.1 Ops/sec
querySelectorAll 934566.2 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 with param

     
    const treeWalker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_ELEMENT
    );
    const list = [];
    while (treeWalker.nextNode()) {
        list.push(treeWalker.currentNode);
    }
  • treeWalker with filter function

     
    const treeWalker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_ALL,
        {
            acceptNode(node) {
                if (node.nodeType === Node.ELEMENT_NODE | Node.TEXT_NODE) {
                    return NodeFilter.FILTER_ACCEPT;
                }
                return NodeFilter.FILTER_REJECT;
            }
        }
    );
    const list = [];
    while (treeWalker.nextNode()) {
        list.push(treeWalker.currentNode);
    }
  • querySelectorAll

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