Benchmark: querySelector vs getElementsByClassName - large HTML

HTML Preparation code:

<!DOCTYPE html>

    <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>&nbsp;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&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>
                </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>
        &nbsp;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">&lt;div class=&quot;test&quot;&gt;&lt;/div&gt;</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(&quot;.test&quot;)</textarea>
            </li>
            <li class="list-group-item">
                <h4>getElementsByClassName</h4>
                <textarea class="form-control" readonly data-code="javascript">document.getElementsByClassName(&quot;.test&quot;)</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">&lt;idle, ready to run&gt;</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">&times;</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>&nbsp;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">&times;</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>&copy; 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">&times;</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">&times;</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>&nbsp;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&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>
                </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>
        &nbsp;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">&lt;div class=&quot;test&quot;&gt;&lt;/div&gt;</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(&quot;.test&quot;)</textarea>
            </li>
            <li class="list-group-item">
                <h4>getElementsByClassName</h4>
                <textarea class="form-control" readonly data-code="javascript">document.getElementsByClassName(&quot;.test&quot;)</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">&lt;idle, ready to run&gt;</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">&times;</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>&nbsp;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">&times;</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>&copy; 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">&times;</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">&times;</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>
Tests:
querySelector
document.querySelector(".test")
getElementsByClassName
document.getElementsByClassName(".test")
Rendered benchmark preparation results:
Suite status: <idle, ready to run>

Previous results
Test case name	Result
querySelector
getElementsByClassName
Fastest: N/A

Slowest: N/A

Latest run results:
No previous run results

This benchmark does not have any results yet. Be the first one to run it!
Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.
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:
1. **HTML Code**: You have a HTML snippet with two parts:
   - The first part contains a "Buy me a coffee" button and some modal elements.
   - The second part is a `div` container with a `modal fade` class, which contains another modal element for authentication.
2. **Individual Test Cases**: You've provided an array of objects that describe two test cases:
   - Each object contains a "Benchmark Definition" (a JavaScript statement to be executed), a "Test Name", and possibly other metadata.
   - The `getElementsByClassName` and `querySelector` statements seem like they might be used as benchmark tests.
3. **Latest Benchmark Result**: You've shared the latest results of two benchmark tests:
   - One for `getElementsByClassName`, which seems to have been executed 9046054 times per second on a Firefox 97 browser on Windows 7.
   - The other for `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.
```javascript
// 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.
Related benchmarks:
querySelector vs getElementsByClassName - large HTML (version: 0)

Comparing performance of: querySelector vs getElementsByClassName

Created: 6 years ago by: Guest

Jump to the latest result

querySelector

getElementsByClassName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):
