<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><i class="fa fa-bar-chart" aria-hidden="true"></i> MeasureThat.net</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/Benchmarks/Add">Create a benchmark</a></li> <li><a data-toggle="modal" data-target="#aboutModal" href="#">About</a></li> <li><a href="/Home/Discussions">Suggestions & Feedback</a></li> <li><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&no_note=0&lc=US¤cy_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 — The safer, easier way to pay online." /></a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/Account/Register">Register</a></li> <li><a href="#" data-toggle="modal" data-target="#authenticateModal">Log in</a></li> </ul> </div> </div> </div> <div class="container body-content"> <div class="row"> <div class="page-header"> <h2> <a href="/Benchmarks"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a> querySelector vs getElementsByClassName <small>(version: 0)</small> </h2> <h4></h4> <h4><b>Comparing performance of:</b> querySelector vs getElementsByClassName</h4> <h5><b>Created:</b> 3 years ago <b>by:</b> Registered User </h5> <h5> <a class="btn btn-primary" href="#latest_results_block">Jump to the latest result</a> </h5></div> <div class="panel panel-default"> <div class="panel-heading"><b>HTML Preparation code:</b> </div> <div class="panel-body"> <textarea class="form-control" readonly data-code="html"><div class="test"></div></textarea> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Tests:</div> <ul class="list-group"> <li class="list-group-item"> <h4>querySelector</h4> <textarea class="form-control" readonly data-code="javascript">document.querySelector(".test")</textarea> </li> <li class="list-group-item"> <h4>getElementsByClassName</h4> <textarea class="form-control" readonly data-code="javascript">document.getElementsByClassName(".test")</textarea> </li> </ul></div><div class="panel panel-default"> <div class="panel-heading"><b>Rendered benchmark preparation results:</b></div> <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></div> <div id="result"> <div class="panel panel-info"> <div class="panel-heading"> <div class="row"> <div class="col-md-6"> <h4> <b>Suite status:</b> <span class="label label-primary" data-role="suite-status"><idle, ready to run></span> <i id='spinner' class="fa fa-refresh fa-spin" style="font-size:20px;display:none;"></i> </h4> </div> <div class="col-md-6 text-right"> <button class="btn btn-primary" id="runTest" disabled>Run tests (2)</button> <a class="btn btn-default" href="/Benchmarks/ListResults/393">Previous results</a> <button class="btn btn-default" id="fork-btn"> <i class="fa fa-code-fork" aria-hidden="true">Fork</i> </button> </div> </div> </div> <div class="panel-heading"id="experimental_features" style="display:none"> <div class="row"> <div class="col-md-6"> <h4> <b>Experimental features:</b> </h4> <div class="alert alert-info" role="alert"> Memory measurements supported only in Chrome. <br> For precise memory measurements Chrome must be launched with <code>--enable-precise-memory-info</code> flag. <br>More information: <a href="https://trackjs.com/blog/monitoring-javascript-memory/" target="_blank">Monitoring JavaScript Memory</a> </div> </div> <div class="col-md-6 text-right"> <button class="btn btn-primary" id="runTestWithMemory">Run tests (record memory info)</button> </div> </div> </div> <ul class="list-group"> <li class="list-group-item"> <table class="table table-striped table-bordered table-hover"> <tr> <th>Test case name</th> <th>Result</th> </tr> <tr data-row-for="querySelector"> <td>querySelector</td> <td data-role="result-label"></td> </tr> <tr data-row-for="getElementsByClassName"> <td>getElementsByClassName</td> <td data-role="result-label"></td> </tr> </table> <h4><b>Fastest:</b> <span data-role="fastest-label">N/A</span></h4> <h4><b>Slowest:</b> <span data-role="slowest-label">N/A</span></h4> </li> </ul> </div></div><div class="panel panel-default" id="latest_results_block"> <div class="panel-heading"><b>Latest run results:</b></div> <div class="panel-body" id="results-placeholder"> <div class="panel panel-default"> <div class="panel-heading"><b>Run details:</b> (Test run date: <span>4 hours ago</span>)</div> <div class="panel-body"> <div class="form-group"> <label for="User_agent:">User agent:</label> <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> </div> <div class="form-group"> <label for="Browser_OS:">Browser/OS:</label> Chrome 83 on Windows </div> <a target="_blank" class="btn btn-default" href="/Benchmarks/ShowResult/104765">View result in a separate tab</a><button type="button" class="btn btn-default" data-toggle="modal" data-target="#embedBenchmarkDialog"> Embed</button><div class="modal fade" id="embedBenchmarkDialog" tabindex="-1" role="dialog" aria-labelledby="embedBenchmark"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Embed Benchmark Result</h4> </div> <div class="modal-body"> <textarea style="width: 100%; height: 100%" readonly><iframe src="https://measurethat.net/Embed?id=104765" width="100%" height="500px"></iframe></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div></div> </div></div><table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Test name</th> <th>Executions per second</th> </tr> </thead> <tbody> <tr> <th scope="row">querySelector</th> <td>2441588.0 Ops/sec</td> </tr> <tr> <th scope="row">getElementsByClassName</th> <td>2877113.0 Ops/sec</td> </tr> </tbody></table><script type="text/javascript">window.addEventListener('load', function(){ var chartData = []; var chartItem = []; var header = ['Test case', 'Executions Per Second']; chartData.push(header); chartItem = []; chartItem.push('querySelector'); chartItem.push(2441588.000); chartData.push(chartItem); chartItem = []; chartItem.push('getElementsByClassName'); chartItem.push(2877113.000); chartData.push(chartItem); google.charts.load('current', { packages: ['corechart', 'bar'] }); google.charts.setOnLoadCallback(() => ShowResultsPageController.drawChart(chartData));});</script> </div> <div id="chart_div" style="width: 90%; height: 35%;"></div> <div id="memory_chart_div"></div></div> <form action="/Benchmarks/PublishResults" class="hidden" id="results-form" method="post"> <input name="BenchmarkId" type="hidden" value="393" /> <input name="BenchmarkVersion" type="hidden" value="0" /> <input name="ResultRows[0].TestName" type="hidden" /> <input name="ResultRows[0].NumberOfSamples" type="hidden" /> <input name="ResultRows[0].ExecutionsPerSecond" type="hidden" /> <input name="ResultRows[0].RelativeMarginOfError" type="hidden" /> <input name="ResultRows[1].TestName" type="hidden" /> <input name="ResultRows[1].NumberOfSamples" type="hidden" /> <input name="ResultRows[1].ExecutionsPerSecond" type="hidden" /> <input name="ResultRows[1].RelativeMarginOfError" type="hidden" /><input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /></form><form action="/Benchmarks/Fork" class="hidden" id="fork-form" method="post"> <input name="id" type="hidden" value="393" /><input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /></form><div class="hidden" id="delete-form"> <form action="/Benchmarks/Delete" method="post"> <input type="hidden" name="id"> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /> </form></div><hr /><div class="text-center"> <button class="show-comments btn btn-default"><i class="fa fa-comments" aria-hidden="true"></i> Comments</button></div><div class="modal fade" id="delete-confirm" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Confirm delete:</h4> </div> <div class="modal-body" style="text-align: center"> Do you really want to delete benchmark? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" id="perform-delete">Delete</button> </div> </div> </div></div><!-- The empty element required for Disqus to loads comments into --><div id="disqus_thread"></div> </div> <hr /> <footer> <p>© 2020 - MeasureThat.net (Version: 1.3.2.1)</p> </footer> </div> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"> </script><script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.min.js\u0022\u003E\u003C\/script\u003E"));</script> <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"> </script><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> <script src="/js/benchmarklab.js?v=y4aITj3b-QhuM6cuxmA3bWXEFo_KK7JJ1eioUYD7XAU"></script> <script type="text/javascript"> DisqusComments.setupLoad(); new ShowPageController(); new DeleteBenchmarkHandler(); </script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/xml/xml.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/javascript/javascript.min.js"></script> <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModal-label">About</h4> </div> <div class="modal-body"> <h2>JavaScript performance benchmarks</h2> <p><b>Source code:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net">GitHub/MeasureThat.net</a></p> <p><b>Report issues:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net/issues">MeasureThat.net/Issues</a> <p><b>Based on:</b> <a target="_blank" href="https://benchmarkjs.com/">Benchmark.js (v2.1.1)</a> <p> <b>Facebook page:</b> <a target="_blank" href="https://www.facebook.com/MeasureThat.Net">https://www.facebook.com/MeasureThat.Net</a> </p> <p> <b>Open the </b> <a target="_blank" href="/Home/Changelog">changelog</a> </p> <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> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div></div><div class="modal fade" id="authenticateModal" tabindex="-1" role="dialog" aria-labelledby="authenticateModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="authenticateModal-label">Log in:</h4> </div> <div class="modal-body" style="text-align: center"> <section></section><section> <a class="btn btn-primary" href="/Account/Login">Sign in with local account</a></section> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </div> </div></div> <div class="test"></div> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><i class="fa fa-bar-chart" aria-hidden="true"></i> MeasureThat.net</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/Benchmarks/Add">Create a benchmark</a></li> <li><a data-toggle="modal" data-target="#aboutModal" href="#">About</a></li> <li><a href="/Home/Discussions">Suggestions & Feedback</a></li> <li><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&no_note=0&lc=US¤cy_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 — The safer, easier way to pay online." /></a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/Account/Register">Register</a></li> <li><a href="#" data-toggle="modal" data-target="#authenticateModal">Log in</a></li> </ul> </div> </div> </div> <div class="container body-content"> <div class="row"> <div class="page-header"> <h2> <a href="/Benchmarks"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a> querySelector vs getElementsByClassName <small>(version: 0)</small> </h2> <h4></h4> <h4><b>Comparing performance of:</b> querySelector vs getElementsByClassName</h4> <h5><b>Created:</b> 3 years ago <b>by:</b> Registered User </h5> <h5> <a class="btn btn-primary" href="#latest_results_block">Jump to the latest result</a> </h5></div> <div class="panel panel-default"> <div class="panel-heading"><b>HTML Preparation code:</b> </div> <div class="panel-body"> <textarea class="form-control" readonly data-code="html"><div class="test"></div></textarea> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Tests:</div> <ul class="list-group"> <li class="list-group-item"> <h4>querySelector</h4> <textarea class="form-control" readonly data-code="javascript">document.querySelector(".test")</textarea> </li> <li class="list-group-item"> <h4>getElementsByClassName</h4> <textarea class="form-control" readonly data-code="javascript">document.getElementsByClassName(".test")</textarea> </li> </ul></div><div class="panel panel-default"> <div class="panel-heading"><b>Rendered benchmark preparation results:</b></div> <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></div> <div id="result"> <div class="panel panel-info"> <div class="panel-heading"> <div class="row"> <div class="col-md-6"> <h4> <b>Suite status:</b> <span class="label label-primary" data-role="suite-status"><idle, ready to run></span> <i id='spinner' class="fa fa-refresh fa-spin" style="font-size:20px;display:none;"></i> </h4> </div> <div class="col-md-6 text-right"> <button class="btn btn-primary" id="runTest" disabled>Run tests (2)</button> <a class="btn btn-default" href="/Benchmarks/ListResults/393">Previous results</a> <button class="btn btn-default" id="fork-btn"> <i class="fa fa-code-fork" aria-hidden="true">Fork</i> </button> </div> </div> </div> <div class="panel-heading"id="experimental_features" style="display:none"> <div class="row"> <div class="col-md-6"> <h4> <b>Experimental features:</b> </h4> <div class="alert alert-info" role="alert"> Memory measurements supported only in Chrome. <br> For precise memory measurements Chrome must be launched with <code>--enable-precise-memory-info</code> flag. <br>More information: <a href="https://trackjs.com/blog/monitoring-javascript-memory/" target="_blank">Monitoring JavaScript Memory</a> </div> </div> <div class="col-md-6 text-right"> <button class="btn btn-primary" id="runTestWithMemory">Run tests (record memory info)</button> </div> </div> </div> <ul class="list-group"> <li class="list-group-item"> <table class="table table-striped table-bordered table-hover"> <tr> <th>Test case name</th> <th>Result</th> </tr> <tr data-row-for="querySelector"> <td>querySelector</td> <td data-role="result-label"></td> </tr> <tr data-row-for="getElementsByClassName"> <td>getElementsByClassName</td> <td data-role="result-label"></td> </tr> </table> <h4><b>Fastest:</b> <span data-role="fastest-label">N/A</span></h4> <h4><b>Slowest:</b> <span data-role="slowest-label">N/A</span></h4> </li> </ul> </div></div><div class="panel panel-default" id="latest_results_block"> <div class="panel-heading"><b>Latest run results:</b></div> <div class="panel-body" id="results-placeholder"> <div class="panel panel-default"> <div class="panel-heading"><b>Run details:</b> (Test run date: <span>4 hours ago</span>)</div> <div class="panel-body"> <div class="form-group"> <label for="User_agent:">User agent:</label> <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> </div> <div class="form-group"> <label for="Browser_OS:">Browser/OS:</label> Chrome 83 on Windows </div> <a target="_blank" class="btn btn-default" href="/Benchmarks/ShowResult/104765">View result in a separate tab</a><button type="button" class="btn btn-default" data-toggle="modal" data-target="#embedBenchmarkDialog"> Embed</button><div class="modal fade" id="embedBenchmarkDialog" tabindex="-1" role="dialog" aria-labelledby="embedBenchmark"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Embed Benchmark Result</h4> </div> <div class="modal-body"> <textarea style="width: 100%; height: 100%" readonly><iframe src="https://measurethat.net/Embed?id=104765" width="100%" height="500px"></iframe></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div></div> </div></div><table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Test name</th> <th>Executions per second</th> </tr> </thead> <tbody> <tr> <th scope="row">querySelector</th> <td>2441588.0 Ops/sec</td> </tr> <tr> <th scope="row">getElementsByClassName</th> <td>2877113.0 Ops/sec</td> </tr> </tbody></table><script type="text/javascript">window.addEventListener('load', function(){ var chartData = []; var chartItem = []; var header = ['Test case', 'Executions Per Second']; chartData.push(header); chartItem = []; chartItem.push('querySelector'); chartItem.push(2441588.000); chartData.push(chartItem); chartItem = []; chartItem.push('getElementsByClassName'); chartItem.push(2877113.000); chartData.push(chartItem); google.charts.load('current', { packages: ['corechart', 'bar'] }); google.charts.setOnLoadCallback(() => ShowResultsPageController.drawChart(chartData));});</script> </div> <div id="chart_div" style="width: 90%; height: 35%;"></div> <div id="memory_chart_div"></div></div> <form action="/Benchmarks/PublishResults" class="hidden" id="results-form" method="post"> <input name="BenchmarkId" type="hidden" value="393" /> <input name="BenchmarkVersion" type="hidden" value="0" /> <input name="ResultRows[0].TestName" type="hidden" /> <input name="ResultRows[0].NumberOfSamples" type="hidden" /> <input name="ResultRows[0].ExecutionsPerSecond" type="hidden" /> <input name="ResultRows[0].RelativeMarginOfError" type="hidden" /> <input name="ResultRows[1].TestName" type="hidden" /> <input name="ResultRows[1].NumberOfSamples" type="hidden" /> <input name="ResultRows[1].ExecutionsPerSecond" type="hidden" /> <input name="ResultRows[1].RelativeMarginOfError" type="hidden" /><input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /></form><form action="/Benchmarks/Fork" class="hidden" id="fork-form" method="post"> <input name="id" type="hidden" value="393" /><input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /></form><div class="hidden" id="delete-form"> <form action="/Benchmarks/Delete" method="post"> <input type="hidden" name="id"> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8MXKOC1evb9BidCbxvq9JGrZLT7Ox263jPiZm8dSp4yge7fQmidXtjhIQOFXzmf2DM1JqQhy6lHDMZ9sqi7nEimqaLQoY3ZFoyS1xf-ZjP2X_rDTFHbiH2x23MSLfGe1w2nnr_YbK7Ix0x82pkDC62Y" /> </form></div><hr /><div class="text-center"> <button class="show-comments btn btn-default"><i class="fa fa-comments" aria-hidden="true"></i> Comments</button></div><div class="modal fade" id="delete-confirm" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Confirm delete:</h4> </div> <div class="modal-body" style="text-align: center"> Do you really want to delete benchmark? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" id="perform-delete">Delete</button> </div> </div> </div></div><!-- The empty element required for Disqus to loads comments into --><div id="disqus_thread"></div> </div> <hr /> <footer> <p>© 2020 - MeasureThat.net (Version: 1.3.2.1)</p> </footer> </div> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"> </script><script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.min.js\u0022\u003E\u003C\/script\u003E"));</script> <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"> </script><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> <script src="/js/benchmarklab.js?v=y4aITj3b-QhuM6cuxmA3bWXEFo_KK7JJ1eioUYD7XAU"></script> <script type="text/javascript"> DisqusComments.setupLoad(); new ShowPageController(); new DeleteBenchmarkHandler(); </script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/xml/xml.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/javascript/javascript.min.js"></script> <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModal-label">About</h4> </div> <div class="modal-body"> <h2>JavaScript performance benchmarks</h2> <p><b>Source code:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net">GitHub/MeasureThat.net</a></p> <p><b>Report issues:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net/issues">MeasureThat.net/Issues</a> <p><b>Based on:</b> <a target="_blank" href="https://benchmarkjs.com/">Benchmark.js (v2.1.1)</a> <p> <b>Facebook page:</b> <a target="_blank" href="https://www.facebook.com/MeasureThat.Net">https://www.facebook.com/MeasureThat.Net</a> </p> <p> <b>Open the </b> <a target="_blank" href="/Home/Changelog">changelog</a> </p> <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> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div></div><div class="modal fade" id="authenticateModal" tabindex="-1" role="dialog" aria-labelledby="authenticateModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="authenticateModal-label">Log in:</h4> </div> <div class="modal-body" style="text-align: center"> <section></section><section> <a class="btn btn-primary" href="/Account/Login">Sign in with local account</a></section> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </div> </div></div> document.querySelector(".test")document.getElementsByClassName(".test")--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| querySelector | |
| getElementsByClassName |
| Test name | Executions per second |
|---|---|
| querySelector | 96758.6 Ops/sec |
| getElementsByClassName | 9046054.0 Ops/sec |
It seems like you're preparing to create a benchmark test case, possibly for a web application.
To get started, let's break down the provided information:
HTML Code: You have a HTML snippet with two parts:
div container with a modal fade class, which contains another modal element for authentication.Individual Test Cases: You've provided an array of objects that describe two test cases:
getElementsByClassName and querySelector statements seem like they might be used as benchmark tests.Latest Benchmark Result: You've shared the latest results of two benchmark tests:
getElementsByClassName, which seems to have been executed 9046054 times per second on a Firefox 97 browser on Windows 7.querySelector, with an execution rate of 96758.6171875 times per second on the same browser and OS.Now, let's create a new benchmark test case based on these inputs. Since we're focusing on querySelector as the main test case, I'll guide you through creating a simple JavaScript function to measure its performance.
Create a New Benchmark Test Case
Let's create a basic benchmarking script in JavaScript that executes the document.querySelector(".test") statement multiple times and measures how long it takes. This will give us an idea of how fast this particular operation is on your system.
// Create an array to store execution times
let executionTimes = [];
function runBenchmark() {
let startTime = performance.now(); // record the start time
for (let i = 0; i < 10000; i++) { // execute the query selector 10,000 times
document.querySelector(".test");
}
let endTime = performance.now(); // record the end time
executionTimes.push(endTime - startTime); // store the execution time
}
// Run the benchmark multiple times to get an average
for (let i = 0; i < 5; i++) {
runBenchmark();
}
This code will execute document.querySelector(".test") 10,000 times and record the execution time. It will then repeat this process five times to give us an average execution time.
Next, we can use a tool like Benchmark.js or benchmarking libraries provided by frameworks like React or Angular to make it easier to run and compare multiple benchmarks on your system.
Please note that running performance benchmarks might require some setup and configuration depending on the browser you're using, as well as any security restrictions.
