<html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="/cdn-cgi/apps/head/Y80KxAZg4r3ZdC852BSge0wYd7Q.js"></script><link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> <meta name="Description" content="JavaScript microbenchmarks, JavaScript performance playground. Measure performance accross different browsers."> <meta name="Keywords" content="JavaScript, jQuery, Performance, Benchmark, Speed, Web, React, Angular, Node.js, dotnet core, asp.net mvc, c#, JS, perf, browser, chrome, firefox, edge, internet explorer, vanilla js vs jquery, jquery vs react, react vs vue, react vs angular, compare performance, which one is faster, more efficient"> <title>Benchmark: querySelectorAll data attribute vs class name - MeasureThat.net</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <link rel="canonical" href="https://www.measurethat.net/Benchmarks/Show/8198/0/queryselectorall-data-attribute-vs-class-name" /> <!--<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />--> <link rel="stylesheet" href="/css/bootstrap_spacelab.min.css" /> <link rel="stylesheet" href="/css/site.css?v=AXMpA-KCHQqte9l2dyYFEjV-Had9U7DyhEWfc-JonOk" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/theme/ambiance.min.css"></head><body> <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 href="/Tools">Online Tools<sup>new</sup></a></li> <li><a data-toggle="modal" data-target="#aboutModal" href="#">About</a></li> <li><a href="/Home/Discussions">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> <form method="post" id="logoutForm" class="navbar-right" action="/Account/LogOff"> <ul class="nav navbar-nav navbar-right"> <li> <a title="Manage" href="/Manage">Hello <span class="__cf_email__" data-cfemail="ed81889e8184889b848187828883ad8a808c8481c38e8280">[email protected]</span>!</a> </li> <li> <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button> </li> </ul> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8NbgH-60BEZCpr-B1awfFxS9flho-v3ZJ1MIRfHIN_gCsBlS1AhI93degGqeIqeaaDoGR6s3wJV-ajno63nhjneVkPVsVCxb-JWrrMGhltDGWi_yz0WP5zeN_F7CVV8z6S0KAmgmqd2rOBQ6lTtipZ3gcKWiedrHr-jjKloRxH4foTeEUllMLB8wsE9FOqPlIA" /></form> </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> querySelectorAll data attribute vs class name <small>(version: 0)</small> </h2> <h4></h4> <h4><b>Comparing performance of:</b> data attribute vs class name</h4> <h5> <b>Created:</b> one year ago <b>by:</b> Guest </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" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="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>data attribute</h4> <textarea class="form-control" readonly data-code="javascript">var test = document.querySelectorAll('[data-attribute="test"]');</textarea> </li> <li class="list-group-item"> <h4>class name</h4> <textarea class="form-control" readonly data-code="javascript">var test = document.querySelectorAll('.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/8198" 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/8198">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="data attribute"> <td>data attribute</td> <td data-role="result-label"></td> </tr> <tr data-row-for="class name"> <td>class name</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> <div class="test" data-attribute="test"></div> </li> </ul> </div></div><div class="tjs" style=" margin: 40px 0; display: flex; justify-content: left; align-items: center;"> <div class="left" style=" flex: 1; align-items: center; display: flex; font-size: 1.4em; "> <span style=" font-size: 2em; font-weight: 900; color: #446e9b; padding: 0 10px; ">ⓘ</span> <span>Get performance results from <strong>real users on your website</strong> with <a href="https://requestmetrics.com/" target="_blank"><strong>Request Metrics</strong></a>.</span> </div> <div class="right" style=" flex: 0 0 280px; height: 92px; border: 1px solid #dddddd; "> <a href="https://requestmetrics.com/" target="_blank"> <img src="/rm.png" alt="Website Performance Monitoring by Request Metrics" height="90" width="280"> </a> </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>6 days ago</span>)</div> <div class="panel-body"> <div class="form-group"> <label for="User_agent:">User agent:</label> <span>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36</span> </div> <div class="form-group"> <label for="Browser_OS:">Browser/OS:</label> Chrome 90 on Mac OS X 10.14.6 </div> <a target="_blank" class="btn btn-default" href="/Benchmarks/ShowResult/186899">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=186899" 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">data attribute</th> <td>472505.2 Ops/sec</td> </tr> <tr> <th scope="row">class name</th> <td>814211.9 Ops/sec</td> </tr> </tbody></table><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><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('data attribute'); chartItem.push(472505.200); chartData.push(chartItem); chartItem = []; chartItem.push('class name'); chartItem.push(814211.900); 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="8198" /><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="CfDJ8NbgH-60BEZCpr-B1awfFxS9flho-v3ZJ1MIRfHIN_gCsBlS1AhI93degGqeIqeaaDoGR6s3wJV-ajno63nhjneVkPVsVCxb-JWrrMGhltDGWi_yz0WP5zeN_F7CVV8z6S0KAmgmqd2rOBQ6lTtipZ3gcKWiedrHr-jjKloRxH4foTeEUllMLB8wsE9FOqPlIA" /></form><form action="/Benchmarks/Fork" class="hidden" id="fork-form" method="post"><input name="id" type="hidden" value="8198" /><input name="__RequestVerificationToken" type="hidden" value="CfDJ8NbgH-60BEZCpr-B1awfFxS9flho-v3ZJ1MIRfHIN_gCsBlS1AhI93degGqeIqeaaDoGR6s3wJV-ajno63nhjneVkPVsVCxb-JWrrMGhltDGWi_yz0WP5zeN_F7CVV8z6S0KAmgmqd2rOBQ6lTtipZ3gcKWiedrHr-jjKloRxH4foTeEUllMLB8wsE9FOqPlIA" /></form><div class="hidden" id="delete-form"> <form action="/Benchmarks/Delete" method="post"> <input type="hidden" name="id"> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8NbgH-60BEZCpr-B1awfFxS9flho-v3ZJ1MIRfHIN_gCsBlS1AhI93degGqeIqeaaDoGR6s3wJV-ajno63nhjneVkPVsVCxb-JWrrMGhltDGWi_yz0WP5zeN_F7CVV8z6S0KAmgmqd2rOBQ6lTtipZ3gcKWiedrHr-jjKloRxH4foTeEUllMLB8wsE9FOqPlIA" /> </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>© 2021 - MeasureThat.net (Version: 1.3.3.0)</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=u7xTtWrvm6FZPW1nPTf3WFWWTmn7xc_Q8WbQvfFXm58"></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><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-83528903-1', 'auto'); ga('send', 'pageview');</script><script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script><script>window.TrackJS && TrackJS.install({ token: "028f6a1c03774007a7b40f656ca7ef3a" // for more configuration options, see https://docs.trackjs.com});</script><script async src="https://cdn.requestmetrics.com/agent/current/rm.js" data-rm-token="k4pi6hu:f2xb6eb"></script></body></html>var test = document.querySelectorAll('[data-attribute="test"]');var test = document.querySelectorAll('.test');--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| data attribute | |
| class name |
| Test name | Executions per second |
|---|---|
| data attribute | 59451.5 Ops/sec |
| class name | 52909.8 Ops/sec |
I'm ready to help!
It seems like we're dealing with some HTML code, CSS styles, and JavaScript snippets. I'll do my best to extract the relevant information.
From what I can see, there are two main things:
[data-attribute="test"]) and class names (e.g., '.test').If you'd like, I can help with:
Please let me know how I can assist you further!
