MeasureThat.net

Run results for: querySelector vs getElementsByClassName - large HTML

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0
Firefox 97
Windows 7
Desktop
3 years ago
Test name Executions per second
querySelector 96758.6 Ops/sec
getElementsByClassName 9046054.0 Ops/sec
HTML Preparation code:
​x
 
1
​
2
<!DOCTYPE html>
3
​
4
    <div class="navbar navbar-inverse navbar-fixed-top">
5
        <div class="container">
6
            <div class="navbar-header">
7
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
8
                    <span class="sr-only">Toggle navigation</span>
9
                    <span class="icon-bar"></span>
10
                    <span class="icon-bar"></span>
11
                    <span class="icon-bar"></span>
12
                </button>
13
                <a class="navbar-brand" href="/"><i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;MeasureThat.net</a>
14
            </div>
15
            <div class="navbar-collapse collapse">
16
                <ul class="nav navbar-nav">
17
                    <li><a href="/Benchmarks/Add">Create a benchmark</a></li>
18
                    <li><a data-toggle="modal" data-target="#aboutModal" href="#">About</a></li>
19
                    <li><a href="/Home/Discussions">Suggestions & Feedback</a></li>
20
                    <li><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&no_note=0&lc=US&currency_code=USD&bn=PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest&business=MeasureThat@outlook.com&item_name=MeasureThat&item_number=Support%20service&amount=0"><img src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" alt="PayPal &#8212; The safer, easier way to pay online." /></a></li>
21
                </ul>
22
23
​
24
    <ul class="nav navbar-nav navbar-right">
25
        <li><a href="/Account/Register">Register</a></li>
26
        <li><a href="#" data-toggle="modal" data-target="#authenticateModal">Log in</a></li>
27
    </ul>
28
​
29
            </div>
30
        </div>
31
    </div>
32
    <div class="container body-content">
33
        <div class="row">
34
35
<div class="page-header">
36
    <h2>
37
        <a href="/Benchmarks"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
38
        &nbsp;querySelector vs getElementsByClassName <small>(version: 0)</small>
39
    </h2>
40
    <h4></h4>
41
    <h4><b>Comparing performance of:</b> querySelector vs getElementsByClassName</h4>
42
    <h5><b>Created:</b> 3 years ago
43
        <b>by:</b>
44
​
45
                Registered User
46
                </h5>
47
    <h5>
48
        <a class="btn btn-primary" href="#latest_results_block">Jump to the latest result</a>
49
    </h5>
50
</div>
51
​
52
​
53
    <div class="panel panel-default">
54
​
55
        <div class="panel-heading"><b>HTML Preparation code:</b> </div>
56
​
57
        <div class="panel-body">
58
            <textarea class="form-control" readonly data-code="html">&lt;div class=&quot;test&quot;&gt;&lt;/div&gt;</textarea>
59
        </div>
60
    </div>
61
<div class="panel panel-default">
62
    <div class="panel-heading">Tests:</div>
63
​
64
    <ul class="list-group">
65
            <li class="list-group-item">
66
                <h4>querySelector</h4>
67
                <textarea class="form-control" readonly data-code="javascript">document.querySelector(&quot;.test&quot;)</textarea>
68
            </li>
69
            <li class="list-group-item">
70
                <h4>getElementsByClassName</h4>
71
                <textarea class="form-control" readonly data-code="javascript">document.getElementsByClassName(&quot;.test&quot;)</textarea>
72
            </li>
73
    </ul>
74
</div>
75
<div class="panel panel-default">
76
​
77
    <div class="panel-heading"><b>Rendered benchmark preparation results:</b></div>
78
​
79
    <iframe id="test-runner-iframe" src="https://www.measurethat.net/Benchmarks/TestFrame/393" style="border:none; max-height: 900px; min-height: px; overflow:scroll"></iframe>
80
</div>
81
​
82
​
83
<div id="result">
84
    <div class="panel panel-info">
85
        <div class="panel-heading">
86
            <div class="row">
87
                <div class="col-md-6">
88
                    <h4>
89
                        <b>Suite status:</b>
90
                        <span class="label label-primary" data-role="suite-status">&lt;idle, ready to run&gt;</span>
91
                        <i id='spinner' class="fa fa-refresh fa-spin" style="font-size:20px;display:none;"></i>
92
                    </h4>
93
                </div>
94
                <div class="col-md-6 text-right">
95
                    <button class="btn btn-primary" id="runTest" disabled>Run tests (2)</button>
96
                    <a class="btn btn-default" href="/Benchmarks/ListResults/393">Previous results</a>
97
                    <button class="btn btn-default" id="fork-btn">
98
                        <i class="fa fa-code-fork" aria-hidden="true">Fork</i>
99
                    </button>
100
                </div>
101
            </div>
102
        </div>
103
        <div class="panel-heading"id="experimental_features" style="display:none">
104
            <div class="row">
105
                <div class="col-md-6">
106
                    <h4>
107
                        <b>Experimental features:</b>
108
                    </h4>
109
                    <div class="alert alert-info" role="alert">
110
                        Memory measurements supported only in Chrome.
111
                        <br>
112
                        For precise memory measurements Chrome must be launched with <code>--enable-precise-memory-info</code> flag.
113
                        <br>More information: <a href="https://trackjs.com/blog/monitoring-javascript-memory/" target="_blank">Monitoring JavaScript Memory</a>
114
                    </div>
115
                </div>
116
                <div class="col-md-6 text-right">
117
                    <button class="btn btn-primary" id="runTestWithMemory">Run tests (record memory info)</button>
118
                </div>
119
            </div>
120
        </div>
121
        <ul class="list-group">
122
            <li class="list-group-item">
123
                <table class="table table-striped table-bordered table-hover">
124
                    <tr>
125
                        <th>Test case name</th>
126
                        <th>Result</th>
127
                    </tr>
128
​
129
                        <tr data-row-for="querySelector">
130
                            <td>querySelector</td>
131
                            <td data-role="result-label"></td>
132
                        </tr>
133
                        <tr data-row-for="getElementsByClassName">
134
                            <td>getElementsByClassName</td>
135
                            <td data-role="result-label"></td>
136
                        </tr>
137
                </table>
138
                <h4><b>Fastest:</b> <span data-role="fastest-label">N/A</span></h4>
139
                <h4><b>Slowest:</b> <span data-role="slowest-label">N/A</span></h4>
140
            </li>
141
        </ul>
142
    </div>
143
</div>
144
​
145
<div class="panel panel-default" id="latest_results_block">
146
    <div class="panel-heading"><b>Latest run results:</b></div>
147
    <div class="panel-body" id="results-placeholder">
148
149
​
150
<div class="panel panel-default">
151
    <div class="panel-heading"><b>Run details:</b> (Test run date:
152
            <span>4 hours ago</span>)</div>
153
    <div class="panel-body">
154
        <div class="form-group">
155
            <label for="User_agent:">User agent:</label>
156
            <span>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.14 Safari/537.36 Edg/83.0.478.10</span>
157
        </div>
158
​
159
        <div class="form-group">
160
            <label for="Browser_OS:">Browser/OS:</label>
161
            Chrome 83 on Windows
162
        </div>
163
164
<a target="_blank" class="btn btn-default" href="/Benchmarks/ShowResult/104765">View result in a separate tab</a>
165
​
166
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#embedBenchmarkDialog">
167
  Embed
168
</button>
169
​
170
<div class="modal fade" id="embedBenchmarkDialog" tabindex="-1" role="dialog" aria-labelledby="embedBenchmark">
171
  <div class="modal-dialog" role="document">
172
    <div class="modal-content">
173
      <div class="modal-header">
174
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
175
        <h4 class="modal-title" id="myModalLabel">Embed Benchmark Result</h4>
176
      </div>
177
      <div class="modal-body">
178
        <textarea style="width: 100%; height: 100%" readonly><iframe src="https://measurethat.net/Embed?id=104765" width="100%" height="500px"></iframe></textarea>
179
      </div>
180
      <div class="modal-footer">
181
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
182
      </div>
183
    </div>
184
  </div>
185
</div>
186
​
187
    </div>
188
</div>
189
​
190
<table class="table table-striped table-bordered table-hover">
191
    <thead>
192
        <tr>
193
            <th>Test name</th>
194
            <th>Executions per second</th>
195
        </tr>
196
    </thead>
197
    <tbody>
198
            <tr>
199
                <th scope="row">querySelector</th>
200
                <td>2441588.0 Ops/sec</td>
201
            </tr>
202
            <tr>
203
                <th scope="row">getElementsByClassName</th>
204
                <td>2877113.0 Ops/sec</td>
205
            </tr>
206
    </tbody>
207
</table>
208
​
209
<script type="text/javascript">
210
window.addEventListener('load', function(){
211
    var chartData = [];
212
    var chartItem = [];
213
    var header = ['Test case', 'Executions Per Second'];
214
    chartData.push(header);
215
​
216
        chartItem = [];
217
        chartItem.push('querySelector');
218
        chartItem.push(2441588.000);
219
        chartData.push(chartItem);
220
221
        chartItem = [];
222
        chartItem.push('getElementsByClassName');
223
        chartItem.push(2877113.000);
224
        chartData.push(chartItem);
225
            google.charts.load('current', { packages: ['corechart', 'bar'] });
226
    google.charts.setOnLoadCallback(() => ShowResultsPageController.drawChart(chartData));
227
});
228
</script>
229
    </div>
230
    <div id="chart_div" style="width: 90%; height: 35%;"></div>
231
    <div id="memory_chart_div"></div>
232
</div>
233
​
234
​
235
<form action="/Benchmarks/PublishResults" class="hidden" id="results-form" method="post">    <input name="BenchmarkId" type="hidden" value="393" />
236
    <input name="BenchmarkVersion" type="hidden" value="0" />
237
        <input name="ResultRows[0].TestName" type="hidden" />
238
        <input name="ResultRows[0].NumberOfSamples" type="hidden" />
239
        <input name="ResultRows[0].ExecutionsPerSecond" type="hidden" />
240
        <input name="ResultRows[0].RelativeMarginOfError" type="hidden" />
241
        <input name="ResultRows[1].TestName" type="hidden" />
242
        <input name="ResultRows[1].NumberOfSamples" type="hidden" />
243
        <input name="ResultRows[1].ExecutionsPerSecond" type="hidden" />
244
        <input name="ResultRows[1].RelativeMarginOfError" type="hidden" />
245
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /></form>
246
​
247
<form action="/Benchmarks/Fork" class="hidden" id="fork-form" method="post">    <input name="id" type="hidden" value="393" />
248
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /></form>
249
<div class="hidden" id="delete-form">
250
    <form action="/Benchmarks/Delete" method="post">
251
        <input type="hidden" name="id">
252
        <input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" />
253
    </form>
254
</div>
255
​
256
​
257
<hr />
258
<div class="text-center">
259
    <button class="show-comments btn btn-default"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;Comments</button>
260
</div>
261
​
262
<div class="modal fade" id="delete-confirm" tabindex="-1" role="dialog">
263
    <div class="modal-dialog">
264
        <div class="modal-content">
265
            <div class="modal-header">
266
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
267
                <h4 class="modal-title">Confirm delete:</h4>
268
            </div>
269
            <div class="modal-body" style="text-align: center">
270
                Do you really want to delete benchmark?
271
            </div>
272
            <div class="modal-footer">
273
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
274
                <button type="button" class="btn btn-primary" id="perform-delete">Delete</button>
275
            </div>
276
        </div>
277
    </div>
278
</div>
279
<!-- The empty element required for Disqus to loads comments into -->
280
<div id="disqus_thread"></div>
281
​
282
        </div>
283
        <hr />
284
        <footer>
285
            <p>&copy; 2020 - MeasureThat.net (Version: 1.3.2.1)</p>
286
        </footer>
287
​
288
    </div>
289
​
290
291
​
292
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js">
293
    </script>
294
<script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.min.js\u0022\u003E\u003C\/script\u003E"));</script>
295
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js">
296
    </script>
297
<script>(window.jQuery && window.jQuery.fn && window.jQuery.fn.modal||document.write("\u003Cscript src=\u0022\/lib\/bootstrap\/dist\/js\/bootstrap.min.js\u0022\u003E\u003C\/script\u003E"));</script>
298
​
299
​
300
301
    <script src="/js/benchmarklab.js?v=y4aITj3b-QhuM6cuxmA3bWXEFo_KK7JJ1eioUYD7XAU"></script>
302
​
303
    <script type="text/javascript">
304
        DisqusComments.setupLoad();
305
        new ShowPageController();
306
        new DeleteBenchmarkHandler();
307
    </script>
308
​
309
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
310
​
311
​
312
​
313
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.js"></script>
314
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/xml/xml.js"></script>
315
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/javascript/javascript.min.js"></script>
316
​
317
​
318
​
319
    <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
320
    <div class="modal-dialog">
321
        <div class="modal-content">
322
            <div class="modal-header">
323
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
324
                <h4 class="modal-title" id="myModal-label">About</h4>
325
            </div>
326
            <div class="modal-body">
327
                <h2>JavaScript performance benchmarks</h2>
328
                <p><b>Source code:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net">GitHub/MeasureThat.net</a></p>
329
                <p><b>Report issues:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net/issues">MeasureThat.net/Issues</a>
330
                <p><b>Based on:</b> <a target="_blank" href="https://benchmarkjs.com/">Benchmark.js (v2.1.1)</a>
331
                <p>
332
                    <b>Facebook page:</b> <a target="_blank" href="https://www.facebook.com/MeasureThat.Net">https://www.facebook.com/MeasureThat.Net</a>
333
                </p>
334
                <p>
335
                    <b>Open the </b> <a target="_blank" href="/Home/Changelog">changelog</a>
336
                </p>
337
                <style>.bmc-button img{width: 27px !important;margin-bottom: 1px !important;box-shadow: none !important;border: none !important;vertical-align: middle !important;}.bmc-button{line-height: 36px !important;height:37px !important;text-decoration: none !important;display:inline-flex !important;color:#ffffff !important;background-color:#BB5794 !important;border-radius: 3px !important;border: 1px solid transparent !important;padding: 1px 9px !important;font-size: 22px !important;letter-spacing: 0.6px !important;box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;margin: 0 auto !important;font-family:'Cookie', cursive !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;-o-transition: 0.3s all linear !important;-webkit-transition: 0.3s all linear !important;-moz-transition: 0.3s all linear !important;-ms-transition: 0.3s all linear !important;transition: 0.3s all linear !important;}.bmc-button:hover, .bmc-button:active, .bmc-button:focus {-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;text-decoration: none !important;box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;opacity: 0.85 !important;color:#ffffff !important;}</style><link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet"><a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/2DBtw96"><img src="https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/BMC-btn-logo.svg" alt="Buy me a coffee"><span style="margin-left:5px">Buy me a coffee</span></a>
338
            </div>
339
            <div class="modal-footer">
340
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
341
            </div>
342
        </div>
343
    </div>
344
</div>
345
​
346
<div class="modal fade" id="authenticateModal" tabindex="-1" role="dialog" aria-labelledby="authenticateModal-label" aria-hidden="true">
347
    <div class="modal-dialog">
348
        <div class="modal-content">
349
            <div class="modal-header">
350
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
351
                <h4 class="modal-title" id="authenticateModal-label">Log in:</h4>
352
            </div>
353
            <div class="modal-body" style="text-align: center">
354
355
<section>
356
</section>
357
<section>
358
    <a class="btn btn-primary" href="/Account/Login">Sign in with local account</a>
359
</section>
360
            </div>
361
            <div class="modal-footer">
362
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
363
            </div>
364
        </div>
365
    </div>
366
</div>
367
​
368
​
369
370
<div class="test"></div>
371
372
    <div class="navbar navbar-inverse navbar-fixed-top">
373
        <div class="container">
374
            <div class="navbar-header">
375
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
376
                    <span class="sr-only">Toggle navigation</span>
377
                    <span class="icon-bar"></span>
378
                    <span class="icon-bar"></span>
379
                    <span class="icon-bar"></span>
380
                </button>
381
                <a class="navbar-brand" href="/"><i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;MeasureThat.net</a>
382
            </div>
383
            <div class="navbar-collapse collapse">
384
                <ul class="nav navbar-nav">
385
                    <li><a href="/Benchmarks/Add">Create a benchmark</a></li>
386
                    <li><a data-toggle="modal" data-target="#aboutModal" href="#">About</a></li>
387
                    <li><a href="/Home/Discussions">Suggestions & Feedback</a></li>
388
                    <li><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&no_note=0&lc=US&currency_code=USD&bn=PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest&business=MeasureThat@outlook.com&item_name=MeasureThat&item_number=Support%20service&amount=0"><img src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" alt="PayPal &#8212; The safer, easier way to pay online." /></a></li>
389
                </ul>
390
391
​
392
    <ul class="nav navbar-nav navbar-right">
393
        <li><a href="/Account/Register">Register</a></li>
394
        <li><a href="#" data-toggle="modal" data-target="#authenticateModal">Log in</a></li>
395
    </ul>
396
​
397
            </div>
398
        </div>
399
    </div>
400
    <div class="container body-content">
401
        <div class="row">
402
403
<div class="page-header">
404
    <h2>
405
        <a href="/Benchmarks"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
406
        &nbsp;querySelector vs getElementsByClassName <small>(version: 0)</small>
407
    </h2>
408
    <h4></h4>
409
    <h4><b>Comparing performance of:</b> querySelector vs getElementsByClassName</h4>
410
    <h5><b>Created:</b> 3 years ago
411
        <b>by:</b>
412
​
413
                Registered User
414
                </h5>
415
    <h5>
416
        <a class="btn btn-primary" href="#latest_results_block">Jump to the latest result</a>
417
    </h5>
418
</div>
419
​
420
​
421
    <div class="panel panel-default">
422
​
423
        <div class="panel-heading"><b>HTML Preparation code:</b> </div>
424
​
425
        <div class="panel-body">
426
            <textarea class="form-control" readonly data-code="html">&lt;div class=&quot;test&quot;&gt;&lt;/div&gt;</textarea>
427
        </div>
428
    </div>
429
<div class="panel panel-default">
430
    <div class="panel-heading">Tests:</div>
431
​
432
    <ul class="list-group">
433
            <li class="list-group-item">
434
                <h4>querySelector</h4>
435
                <textarea class="form-control" readonly data-code="javascript">document.querySelector(&quot;.test&quot;)</textarea>
436
            </li>
437
            <li class="list-group-item">
438
                <h4>getElementsByClassName</h4>
439
                <textarea class="form-control" readonly data-code="javascript">document.getElementsByClassName(&quot;.test&quot;)</textarea>
440
            </li>
441
    </ul>
442
</div>
443
<div class="panel panel-default">
444
​
445
    <div class="panel-heading"><b>Rendered benchmark preparation results:</b></div>
446
​
447
    <iframe id="test-runner-iframe" src="https://www.measurethat.net/Benchmarks/TestFrame/393" style="border:none; max-height: 900px; min-height: px; overflow:scroll"></iframe>
448
</div>
449
​
450
​
451
<div id="result">
452
    <div class="panel panel-info">
453
        <div class="panel-heading">
454
            <div class="row">
455
                <div class="col-md-6">
456
                    <h4>
457
                        <b>Suite status:</b>
458
                        <span class="label label-primary" data-role="suite-status">&lt;idle, ready to run&gt;</span>
459
                        <i id='spinner' class="fa fa-refresh fa-spin" style="font-size:20px;display:none;"></i>
460
                    </h4>
461
                </div>
462
                <div class="col-md-6 text-right">
463
                    <button class="btn btn-primary" id="runTest" disabled>Run tests (2)</button>
464
                    <a class="btn btn-default" href="/Benchmarks/ListResults/393">Previous results</a>
465
                    <button class="btn btn-default" id="fork-btn">
466
                        <i class="fa fa-code-fork" aria-hidden="true">Fork</i>
467
                    </button>
468
                </div>
469
            </div>
470
        </div>
471
        <div class="panel-heading"id="experimental_features" style="display:none">
472
            <div class="row">
473
                <div class="col-md-6">
474
                    <h4>
475
                        <b>Experimental features:</b>
476
                    </h4>
477
                    <div class="alert alert-info" role="alert">
478
                        Memory measurements supported only in Chrome.
479
                        <br>
480
                        For precise memory measurements Chrome must be launched with <code>--enable-precise-memory-info</code> flag.
481
                        <br>More information: <a href="https://trackjs.com/blog/monitoring-javascript-memory/" target="_blank">Monitoring JavaScript Memory</a>
482
                    </div>
483
                </div>
484
                <div class="col-md-6 text-right">
485
                    <button class="btn btn-primary" id="runTestWithMemory">Run tests (record memory info)</button>
486
                </div>
487
            </div>
488
        </div>
489
        <ul class="list-group">
490
            <li class="list-group-item">
491
                <table class="table table-striped table-bordered table-hover">
492
                    <tr>
493
                        <th>Test case name</th>
494
                        <th>Result</th>
495
                    </tr>
496
​
497
                        <tr data-row-for="querySelector">
498
                            <td>querySelector</td>
499
                            <td data-role="result-label"></td>
500
                        </tr>
501
                        <tr data-row-for="getElementsByClassName">
502
                            <td>getElementsByClassName</td>
503
                            <td data-role="result-label"></td>
504
                        </tr>
505
                </table>
506
                <h4><b>Fastest:</b> <span data-role="fastest-label">N/A</span></h4>
507
                <h4><b>Slowest:</b> <span data-role="slowest-label">N/A</span></h4>
508
            </li>
509
        </ul>
510
    </div>
511
</div>
512
​
513
<div class="panel panel-default" id="latest_results_block">
514
    <div class="panel-heading"><b>Latest run results:</b></div>
515
    <div class="panel-body" id="results-placeholder">
516
517
​
518
<div class="panel panel-default">
519
    <div class="panel-heading"><b>Run details:</b> (Test run date:
520
            <span>4 hours ago</span>)</div>
521
    <div class="panel-body">
522
        <div class="form-group">
523
            <label for="User_agent:">User agent:</label>
524
            <span>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.14 Safari/537.36 Edg/83.0.478.10</span>
525
        </div>
526
​
527
        <div class="form-group">
528
            <label for="Browser_OS:">Browser/OS:</label>
529
            Chrome 83 on Windows
530
        </div>
531
532
<a target="_blank" class="btn btn-default" href="/Benchmarks/ShowResult/104765">View result in a separate tab</a>
533
​
534
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#embedBenchmarkDialog">
535
  Embed
536
</button>
537
​
538
<div class="modal fade" id="embedBenchmarkDialog" tabindex="-1" role="dialog" aria-labelledby="embedBenchmark">
539
  <div class="modal-dialog" role="document">
540
    <div class="modal-content">
541
      <div class="modal-header">
542
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
543
        <h4 class="modal-title" id="myModalLabel">Embed Benchmark Result</h4>
544
      </div>
545
      <div class="modal-body">
546
        <textarea style="width: 100%; height: 100%" readonly><iframe src="https://measurethat.net/Embed?id=104765" width="100%" height="500px"></iframe></textarea>
547
      </div>
548
      <div class="modal-footer">
549
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
550
      </div>
551
    </div>
552
  </div>
553
</div>
554
​
555
    </div>
556
</div>
557
​
558
<table class="table table-striped table-bordered table-hover">
559
    <thead>
560
        <tr>
561
            <th>Test name</th>
562
            <th>Executions per second</th>
563
        </tr>
564
    </thead>
565
    <tbody>
566
            <tr>
567
                <th scope="row">querySelector</th>
568
                <td>2441588.0 Ops/sec</td>
569
            </tr>
570
            <tr>
571
                <th scope="row">getElementsByClassName</th>
572
                <td>2877113.0 Ops/sec</td>
573
            </tr>
574
    </tbody>
575
</table>
576
​
577
<script type="text/javascript">
578
window.addEventListener('load', function(){
579
    var chartData = [];
580
    var chartItem = [];
581
    var header = ['Test case', 'Executions Per Second'];
582
    chartData.push(header);
583
​
584
        chartItem = [];
585
        chartItem.push('querySelector');
586
        chartItem.push(2441588.000);
587
        chartData.push(chartItem);
588
589
        chartItem = [];
590
        chartItem.push('getElementsByClassName');
591
        chartItem.push(2877113.000);
592
        chartData.push(chartItem);
593
            google.charts.load('current', { packages: ['corechart', 'bar'] });
594
    google.charts.setOnLoadCallback(() => ShowResultsPageController.drawChart(chartData));
595
});
596
</script>
597
    </div>
598
    <div id="chart_div" style="width: 90%; height: 35%;"></div>
599
    <div id="memory_chart_div"></div>
600
</div>
601
​
602
​
603
<form action="/Benchmarks/PublishResults" class="hidden" id="results-form" method="post">    <input name="BenchmarkId" type="hidden" value="393" />
604
    <input name="BenchmarkVersion" type="hidden" value="0" />
605
        <input name="ResultRows[0].TestName" type="hidden" />
606
        <input name="ResultRows[0].NumberOfSamples" type="hidden" />
607
        <input name="ResultRows[0].ExecutionsPerSecond" type="hidden" />
608
        <input name="ResultRows[0].RelativeMarginOfError" type="hidden" />
609
        <input name="ResultRows[1].TestName" type="hidden" />
610
        <input name="ResultRows[1].NumberOfSamples" type="hidden" />
611
        <input name="ResultRows[1].ExecutionsPerSecond" type="hidden" />
612
        <input name="ResultRows[1].RelativeMarginOfError" type="hidden" />
613
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /></form>
614
​
615
<form action="/Benchmarks/Fork" class="hidden" id="fork-form" method="post">    <input name="id" type="hidden" value="393" />
616
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /></form>
617
<div class="hidden" id="delete-form">
618
    <form action="/Benchmarks/Delete" method="post">
619
        <input type="hidden" name="id">
620
        <input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" />
621
    </form>
622
</div>
623
​
624
​
625
<hr />
626
<div class="text-center">
627
    <button class="show-comments btn btn-default"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;Comments</button>
628
</div>
629
​
630
<div class="modal fade" id="delete-confirm" tabindex="-1" role="dialog">
631
    <div class="modal-dialog">
632
        <div class="modal-content">
633
            <div class="modal-header">
634
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
635
                <h4 class="modal-title">Confirm delete:</h4>
636
            </div>
637
            <div class="modal-body" style="text-align: center">
638
                Do you really want to delete benchmark?
639
            </div>
640
            <div class="modal-footer">
641
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
642
                <button type="button" class="btn btn-primary" id="perform-delete">Delete</button>
643
            </div>
644
        </div>
645
    </div>
646
</div>
647
<!-- The empty element required for Disqus to loads comments into -->
648
<div id="disqus_thread"></div>
649
​
650
        </div>
651
        <hr />
652
        <footer>
653
            <p>&copy; 2020 - MeasureThat.net (Version: 1.3.2.1)</p>
654
        </footer>
655
​
656
    </div>
657
​
658
659
​
660
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js">
661
    </script>
662
<script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.min.js\u0022\u003E\u003C\/script\u003E"));</script>
663
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js">
664
    </script>
665
<script>(window.jQuery && window.jQuery.fn && window.jQuery.fn.modal||document.write("\u003Cscript src=\u0022\/lib\/bootstrap\/dist\/js\/bootstrap.min.js\u0022\u003E\u003C\/script\u003E"));</script>
666
​
667
​
668
669
    <script src="/js/benchmarklab.js?v=y4aITj3b-QhuM6cuxmA3bWXEFo_KK7JJ1eioUYD7XAU"></script>
670
​
671
    <script type="text/javascript">
672
        DisqusComments.setupLoad();
673
        new ShowPageController();
674
        new DeleteBenchmarkHandler();
675
    </script>
676
​
677
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
678
​
679
​
680
​
681
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.js"></script>
682
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/xml/xml.js"></script>
683
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/javascript/javascript.min.js"></script>
684
​
685
​
686
​
687
    <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
688
    <div class="modal-dialog">
689
        <div class="modal-content">
690
            <div class="modal-header">
691
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
692
                <h4 class="modal-title" id="myModal-label">About</h4>
693
            </div>
694
            <div class="modal-body">
695
                <h2>JavaScript performance benchmarks</h2>
696
                <p><b>Source code:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net">GitHub/MeasureThat.net</a></p>
697
                <p><b>Report issues:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net/issues">MeasureThat.net/Issues</a>
698
                <p><b>Based on:</b> <a target="_blank" href="https://benchmarkjs.com/">Benchmark.js (v2.1.1)</a>
699
                <p>
700
                    <b>Facebook page:</b> <a target="_blank" href="https://www.facebook.com/MeasureThat.Net">https://www.facebook.com/MeasureThat.Net</a>
701
                </p>
702
                <p>
703
                    <b>Open the </b> <a target="_blank" href="/Home/Changelog">changelog</a>
704
                </p>
705
                <style>.bmc-button img{width: 27px !important;margin-bottom: 1px !important;box-shadow: none !important;border: none !important;vertical-align: middle !important;}.bmc-button{line-height: 36px !important;height:37px !important;text-decoration: none !important;display:inline-flex !important;color:#ffffff !important;background-color:#BB5794 !important;border-radius: 3px !important;border: 1px solid transparent !important;padding: 1px 9px !important;font-size: 22px !important;letter-spacing: 0.6px !important;box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;margin: 0 auto !important;font-family:'Cookie', cursive !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;-o-transition: 0.3s all linear !important;-webkit-transition: 0.3s all linear !important;-moz-transition: 0.3s all linear !important;-ms-transition: 0.3s all linear !important;transition: 0.3s all linear !important;}.bmc-button:hover, .bmc-button:active, .bmc-button:focus {-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;text-decoration: none !important;box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;opacity: 0.85 !important;color:#ffffff !important;}</style><link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet"><a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/2DBtw96"><img src="https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/BMC-btn-logo.svg" alt="Buy me a coffee"><span style="margin-left:5px">Buy me a coffee</span></a>
706
            </div>
707
            <div class="modal-footer">
708
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
709
            </div>
710
        </div>
711
    </div>
712
</div>
713
​
714
<div class="modal fade" id="authenticateModal" tabindex="-1" role="dialog" aria-labelledby="authenticateModal-label" aria-hidden="true">
715
    <div class="modal-dialog">
716
        <div class="modal-content">
717
            <div class="modal-header">
718
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
719
                <h4 class="modal-title" id="authenticateModal-label">Log in:</h4>
720
            </div>
721
            <div class="modal-body" style="text-align: center">
722
723
<section>
724
</section>
725
<section>
726
    <a class="btn btn-primary" href="/Account/Login">Sign in with local account</a>
727
</section>
728
            </div>
729
            <div class="modal-footer">
730
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
731
            </div>
732
        </div>
733
    </div>
734
</div>
735
​
736
​
737
Tests:

  • querySelector

     
    document.querySelector(".test")

  • getElementsByClassName

     
    document.getElementsByClassName(".test")