MeasureThat.net

Run results for: TreeWalker vs querySelectorAll(getting first and list child) v2

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Chrome 121
Windows
Desktop
one year ago
Test name Executions per second
TreeWalker 1489311.4 Ops/sec
querySelectorAll 420927.6 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 --><!-- article out start -->
27
<article>
28
  <!-- article in start -->
29
  <h1>Lorem ipsum</h1>
30
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
31
  <!-- article in end -->
32
</article>
33
<!-- article out end -->
34
​
35
<!-- article out start -->
36
<article>
37
  <!-- article in start -->
38
  <h1>Lorem ipsum</h1>
39
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
40
  <!-- article in end -->
41
</article>
42
<!-- article out end -->
43
​
44
<!-- article out start -->
45
<article>
46
  <!-- article in start -->
47
  <h1>Lorem ipsum</h1>
48
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
49
  <!-- article in end -->
50
</article>
51
<!-- article out end --><!-- article out start -->
52
<article>
53
  <!-- article in start -->
54
  <h1>Lorem ipsum</h1>
55
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
56
  <!-- article in end -->
57
</article>
58
<!-- article out end -->
59
​
60
<!-- article out start -->
61
<article>
62
  <!-- article in start -->
63
  <h1>Lorem ipsum</h1>
64
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
65
  <!-- article in end -->
66
</article>
67
<!-- article out end -->
68
​
69
<!-- article out start -->
70
<article>
71
  <!-- article in start -->
72
  <h1>Lorem ipsum</h1>
73
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
74
  <!-- article in end -->
75
</article>
76
<!-- article out end --><!-- article out start -->
77
<article>
78
  <!-- article in start -->
79
  <h1>Lorem ipsum</h1>
80
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
81
  <!-- article in end -->
82
</article>
83
<!-- article out end -->
84
​
85
<!-- article out start -->
86
<article>
87
  <!-- article in start -->
88
  <h1>Lorem ipsum</h1>
89
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
90
  <!-- article in end -->
91
</article>
92
<!-- article out end -->
93
​
94
<!-- article out start -->
95
<article>
96
  <!-- article in start -->
97
  <h1>Lorem ipsum</h1>
98
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
99
  <!-- article in end -->
100
</article>
101
<!-- article out end --><!-- article out start -->
102
<article>
103
  <!-- article in start -->
104
  <h1>Lorem ipsum</h1>
105
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
106
  <!-- article in end -->
107
</article>
108
<!-- article out end -->
109
​
110
<!-- article out start -->
111
<article>
112
  <!-- article in start -->
113
  <h1>Lorem ipsum</h1>
114
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
115
  <!-- article in end -->
116
</article>
117
<!-- article out end -->
118
​
119
<!-- article out start -->
120
<article>
121
  <!-- article in start -->
122
  <h1>Lorem ipsum</h1>
123
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
124
  <!-- article in end -->
125
</article>
126
<!-- article out end --><!-- article out start -->
127
<article>
128
  <!-- article in start -->
129
  <h1>Lorem ipsum</h1>
130
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
131
  <!-- article in end -->
132
</article>
133
<!-- article out end -->
134
​
135
<!-- article out start -->
136
<article>
137
  <!-- article in start -->
138
  <h1>Lorem ipsum</h1>
139
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
140
  <!-- article in end -->
141
</article>
142
<!-- article out end -->
143
​
144
<!-- article out start -->
145
<article>
146
  <!-- article in start -->
147
  <h1>Lorem ipsum</h1>
148
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
149
  <!-- article in end -->
150
</article>
151
<!-- article out end --><!-- article out start -->
152
<article>
153
  <!-- article in start -->
154
  <h1>Lorem ipsum</h1>
155
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
156
  <!-- article in end -->
157
</article>
158
<!-- article out end -->
159
​
160
<!-- article out start -->
161
<article>
162
  <!-- article in start -->
163
  <h1>Lorem ipsum</h1>
164
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
165
  <!-- article in end -->
166
</article>
167
<!-- article out end -->
168
​
169
<!-- article out start -->
170
<article>
171
  <!-- article in start -->
172
  <h1>Lorem ipsum</h1>
173
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
174
  <!-- article in end -->
175
</article>
176
<!-- article out end --><!-- article out start -->
177
<article>
178
  <!-- article in start -->
179
  <h1>Lorem ipsum</h1>
180
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
181
  <!-- article in end -->
182
</article>
183
<!-- article out end -->
184
​
185
<!-- article out start -->
186
<article>
187
  <!-- article in start -->
188
  <h1>Lorem ipsum</h1>
189
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
190
  <!-- article in end -->
191
</article>
192
<!-- article out end -->
193
​
194
<!-- article out start -->
195
<article>
196
  <!-- article in start -->
197
  <h1>Lorem ipsum</h1>
198
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
199
  <!-- article in end -->
200
</article>
201
<!-- article out end -->
Tests:

  • TreeWalker

     
    const treeWalker = document.createTreeWalker(
      document.body,
      NodeFilter.SHOW_ELEMENT
    );
    ​
    treeWalker.lastChild();
    treeWalker.firstChild();

  • querySelectorAll

     
    const list = document.body.querySelectorAll('*');
    ​
    list[0];
    list[-1];