Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
TreeWalker vs querySelectorAll (* all elements) 2
(version: 3)
sdf
Comparing performance of:
TreeWalker vs querySelectorAll
Created:
3 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<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" data-precheck="false">Toggle navigation</span> <span class="icon-bar" data-precheck="false"></span> <span class="icon-bar" data-precheck="false"></span> <span class="icon-bar" data-precheck="false"></span> </button> <a class="navbar-brand" href="/"><i class="fa fa-bar-chart" aria-hidden="true" data-precheck="false"></i> MeasureThat.net</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/Benchmarks/Add" data-precheck="false">Create a benchmark</a></li> <li><a href="/Tools">Online Tools<sup data-precheck="false">new</sup></a></li> <li><a data-toggle="modal" data-target="#aboutModal" href="#" data-precheck="false">About</a></li> <li><a href="/Home/Discussions" data-precheck="false">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 — The safer, easier way to pay online." data-precheck="false"></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" data-precheck="false">Hello rilex98677@iconzap.com!</a> </li> <li> <button type="submit" class="btn btn-link navbar-btn navbar-link" data-precheck="false">Log off</button> </li> </ul> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8BYV91WYjT9OvOiHKyU7Td8sVLB3r7zcuqkzhquGJ1-r9vFv7FkPJl2mfW73CCgtuAj6gsu9KyDtfJJVchhaL1nfUbcczjsgqpa9Y78co69ikK5He3EBL0UXNipz6XkWsPCL-h5T18udx8EPHzPZHUxruWfTa8h-EU9wSjKsIh0NKX0tPzivEUM5DrzMJ95NOw" data-precheck="false"></form> </div> </div> </div> <div class="container body-content"> <div class="row"> <div class="page-header"> <h1 data-precheck="false">Edit benchmark</h1> </div> <form action="/Benchmarks/Edit/19187" id="new-benchmark-form" method="post" novalidate="novalidate"><div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none" data-precheck="false"></li> </ul></div><input data-val="true" data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="19187" data-precheck="false"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" data-precheck="false"> Benchmark name and description </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="form-group"> <label for="BenchmarkName" data-precheck="false">Benchmark Name</label> <input class="form-control" data-val="true" data-val-length="The Benchmark Name must be at least 6 and at max 200 characters long." data-val-length-max="200" data-val-length-min="6" data-val-required="The Benchmark Name field is required." id="BenchmarkName" name="BenchmarkName" placeholder="Name of the benchmark" type="text" value="TreeWalker vs querySelectorAll (* all elements) 2" data-precheck="false"> <span id="dup-title" class="text-danger field-validation-error" style="" data-precheck="false">Benchmark with such name already exists.</span> <span class="field-validation-valid text-danger" data-valmsg-for="BenchmarkName" data-valmsg-replace="true" data-precheck="false"></span> </div> <div class="form-group"> <label for="Description" data-precheck="false">Description</label> <textarea class="form-control" data-val="true" data-val-length="The Description must be at max 4000 characters long." data-val-length-max="4000" id="Description" name="Description" placeholder="Benchmark description" data-precheck="false">sdf</textarea> <span class="field-validation-valid text-danger" data-valmsg-for="Description" data-valmsg-replace="true" data-precheck="false"></span> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" data-precheck="false"> Preparation code </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <div class="form-group"> <label for="HtmlPreparationCode" data-precheck="false">Html Preparation code</label> <textarea class="form-control" id="HtmlPreparationCode" name="HtmlPreparationCode" style="display: none;" data-precheck="false"><!-- article out start --> <article> <!-- article in start --> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p> <!-- article in end --> </article> <!-- article out end --> <!-- article out start --> <article> <!-- article in start --> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p> <!-- article in end --> </article> <!-- article out end --> <!-- article out start --> <article> <!-- article in start --> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p> <!-- article in end --> </article> <!-- article out end --></textarea><div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 11px; left: 47px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" data-precheck="false"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true" style="bottom: 0px;"><div style="min-width: 1px; height: 0px;" data-precheck="false"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true"><div style="height: 100%; min-height: 1px; width: 0px;" data-precheck="false"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true" data-precheck="false"></div><div class="CodeMirror-gutter-filler" cm-not-content="true" data-precheck="false"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -17px; border-right-width: 13px; min-height: 28px; min-width: 7px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre>x</pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>1</div></div></div><div class="CodeMirror-measure" data-precheck="false"></div><div style="position: relative; z-index: 1;" data-precheck="false"></div><div class="CodeMirror-cursors" style=""><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 20px;"> </div></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 13px; width: 1px; border-bottom: 0px solid transparent; top: 28px;" data-precheck="false"></div><div class="CodeMirror-gutters" style="height: 41px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;" data-precheck="false"></div></div></div></div> <span class="field-validation-valid text-danger" data-valmsg-for="HtmlPreparationCode" data-valmsg-replace="true" data-precheck="false"></span> <br data-precheck="false"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Quick HTML Snippets: <span class="caret" data-precheck="false"></span> </button> <ul class="dropdown-menu"> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<div id=''></div>" data-precheck="false"><div/></a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<a id='' href='#' />" data-precheck="false"><a/></a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<canvas id='' width='' height=''></canvas>" data-precheck="false"><canvas/></a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src=''></script>" data-precheck="false"><script></a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Reference popular libraries: <span class="caret" data-precheck="false"></span> </button> <ul class="dropdown-menu"> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>" data-precheck="false">jQuery</a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/cjs/react.production.min.js'></script>" data-precheck="false">React.JS</a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>" data-precheck="false">lodash</a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js'></script>" data-precheck="false">moment.js</a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>" data-precheck="false">Chart.js</a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>" data-precheck="false">jqueryui</a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>" data-precheck="false">underscore.js</a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js'></script>" data-precheck="false">d3</a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js'></script>" data-precheck="false">angular.js</a></li> </ul> </div> <button type="button" class="btn btn-default" data-format-type="html" data-role="format-input" data-target="HtmlPreparationCode" id="format_html" data-precheck="false"> Format HTML </button> </div> <hr data-precheck="false"> <div class="form-group"> <label for="ScriptPreparationCode" data-precheck="false">JavaScript preparation code</label> <textarea class="form-control" id="ScriptPreparationCode" name="ScriptPreparationCode" style="display: none;" data-precheck="false"></textarea><div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 11px; left: 47px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" data-precheck="false"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true"><div style="min-width: 1px; height: 0px;" data-precheck="false"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true"><div style="height: 100%; min-height: 1px; width: 0px;" data-precheck="false"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true" data-precheck="false"></div><div class="CodeMirror-gutter-filler" cm-not-content="true" data-precheck="false"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -17px; border-right-width: 13px; min-height: 28px; min-width: 7px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div data-precheck="false">1</div></div></div><div class="CodeMirror-measure" data-precheck="false"></div><div style="position: relative; z-index: 1;" data-precheck="false"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 20px;"> </div></div><div class="CodeMirror-code"><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="" data-precheck="false"></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 13px; width: 1px; border-bottom: 0px solid transparent; top: 28px;" data-precheck="false"></div><div class="CodeMirror-gutters" style="height: 41px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;" data-precheck="false"></div></div></div></div> <span class="field-validation-valid text-danger" data-valmsg-for="ScriptPreparationCode" data-valmsg-replace="true" data-precheck="false"></span> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> New Script snippets: <span class="caret" data-precheck="false"></span> </button> <ul class="dropdown-menu"> <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="for(i=0; i<10; i++){}" data-precheck="false">For loop</a></li> <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="var arr = ['', '', ''];" data-precheck="false">Array</a></li> <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="var el = document.getElementById('');" data-precheck="false">document.getElementById</a></li> <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="console.log('');" data-precheck="false">console.log</a></li> </ul> </div> <button type="button" class="btn btn-default" data-target="ScriptPreparationCode" data-format-type="js" data-role="format-input" data-precheck="false"> Format JavaScript </button> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree" data-precheck="false"> Test cases </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree"> <ul class="list-group" id="test-case-list"><li class="list-group-item" data-role="testCaseComponent"> <div class="form-group"> <label for="TestCases.TestCaseDtoName" data-precheck="false">Name your test:</label> <input type="text" class="form-control" placeholder="Name of the test case" data-val="true" data-val-regex="The field Test Case must match the regular expression '[a-zA-Z0-9.`~!@#$%^&*()]'." data-val-regex-pattern="[a-zA-Z0-9.`~!@#$%^&*()]" data-val-required="The Test Case field is required." name="TestCases[0].TestCaseDtoName" value="TreeWalker" data-role="testCaseName" data-precheck="false"> <label for="TestCases.BenchmarkCode" data-precheck="false">Benchmark code</label> <textarea class="form-control" data-val="true" placeholder="Benchmark code" data-val-required="The Benchmark code is required." name="TestCases[0].BenchmarkCode" data-role="testCaseCode" style="display: none;" data-precheck="false">const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT ); let element; while (element = treeWalker.nextNode()) { }</textarea><div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 11px; left: 47px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" data-precheck="false"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true"><div style="min-width: 1px; height: 0px;" data-precheck="false"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true"><div style="height: 100%; min-height: 1px; width: 0px;" data-precheck="false"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true" data-precheck="false"></div><div class="CodeMirror-gutter-filler" cm-not-content="true" data-precheck="false"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -17px; border-right-width: 13px; min-height: 188px; min-width: 353.396px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div data-precheck="false">9</div></div></div><div class="CodeMirror-measure" data-precheck="false"></div><div style="position: relative; z-index: 1;" data-precheck="false"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 20px;"> </div></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-keyword" data-precheck="false">const</span> <span class="cm-def" data-precheck="false">treeWalker</span> <span class="cm-operator" data-precheck="false">=</span> <span class="cm-variable" data-precheck="false">document</span>.<span class="cm-property" data-precheck="false">createTreeWalker</span>(</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">2</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-variable" data-precheck="false">document</span>.<span class="cm-property" data-precheck="false">body</span>,</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">3</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-variable" data-precheck="false">NodeFilter</span>.<span class="cm-property" data-precheck="false">SHOW_ELEMENT</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">4</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;" data-precheck="false">);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">5</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="" data-precheck="false"></span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">6</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-keyword" data-precheck="false">let</span> <span class="cm-def" data-precheck="false">element</span>;</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">7</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-keyword" data-precheck="false">while</span> (<span class="cm-variable" data-precheck="false">element</span> <span class="cm-operator" data-precheck="false">=</span> <span class="cm-variable" data-precheck="false">treeWalker</span>.<span class="cm-property" data-precheck="false">nextNode</span>()) {</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">8</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;" data-precheck="false"> </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">9</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;" data-precheck="false">}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 13px; width: 1px; border-bottom: 0px solid transparent; top: 188px;" data-precheck="false"></div><div class="CodeMirror-gutters" style="height: 201px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;" data-precheck="false"></div></div></div></div> <span class="field-validation-valid text-danger" data-valmsg-for="TestCases.BenchmarkCode" data-valmsg-replace="true" data-precheck="false"></span> </div> <div class="form-group text-right"> <button data-action="delete-test" class="btn btn-default" data-precheck="false">Delete test case</button> </div> </li><li class="list-group-item" data-role="testCaseComponent"> <div class="form-group"> <label for="TestCases.TestCaseDtoName" data-precheck="false">Name your test:</label> <input type="text" class="form-control" placeholder="Name of the test case" data-val="true" data-val-regex="The field Test Case must match the regular expression '[a-zA-Z0-9.`~!@#$%^&*()]'." data-val-regex-pattern="[a-zA-Z0-9.`~!@#$%^&*()]" data-val-required="The Test Case field is required." name="TestCases[1].TestCaseDtoName" value="querySelectorAll" data-role="testCaseName" data-precheck="false"> <label for="TestCases.BenchmarkCode" data-precheck="false">Benchmark code</label> <textarea class="form-control" data-val="true" placeholder="Benchmark code" data-val-required="The Benchmark code is required." name="TestCases[1].BenchmarkCode" data-role="testCaseCode" style="display: none;" data-precheck="false">const list = document.body.querySelectorAll('*');</textarea><div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 11px; left: 47px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" data-precheck="false"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true"><div style="min-width: 1px; height: 0px;" data-precheck="false"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true"><div style="height: 100%; min-height: 1px; width: 0px;" data-precheck="false"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true" data-precheck="false"></div><div class="CodeMirror-gutter-filler" cm-not-content="true" data-precheck="false"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -17px; border-right-width: 13px; min-height: 28px; min-width: 384.188px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div data-precheck="false">1</div></div></div><div class="CodeMirror-measure" data-precheck="false"></div><div style="position: relative; z-index: 1;" data-precheck="false"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 20px;"> </div></div><div class="CodeMirror-code"><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -30px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;" data-precheck="false">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-keyword" data-precheck="false">const</span> <span class="cm-def" data-precheck="false">list</span> <span class="cm-operator" data-precheck="false">=</span> <span class="cm-variable" data-precheck="false">document</span>.<span class="cm-property" data-precheck="false">body</span>.<span class="cm-property" data-precheck="false">querySelectorAll</span>(<span class="cm-string" data-precheck="false">'*'</span>);</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 13px; width: 1px; border-bottom: 0px solid transparent; top: 28px;" data-precheck="false"></div><div class="CodeMirror-gutters" style="height: 41px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;" data-precheck="false"></div></div></div></div> <span class="field-validation-valid text-danger" data-valmsg-for="TestCases.BenchmarkCode" data-valmsg-replace="true" data-precheck="false"></span> </div> <div class="form-group text-right"> <button data-action="delete-test" class="btn btn-default" data-precheck="false">Delete test case</button> </div> </li></ul> <div class="panel-footer"> <span class="field-validation-valid text-danger" data-valmsg-for="TestCases" data-valmsg-replace="true" data-precheck="false"></span> <div class="form-group"> <input type="button" class="btn btn-default" data-action="new-test" value="Add test case" data-precheck="false"> </div> </div> </div> </div> </div> <div class="form-group"> <div class="g-recaptcha" data-sitekey="6LezciITAAAAAM8yvrfrR23FDpltM8Luz9QB_8O0"><div style="width: 304px; height: 78px;"><div><iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LezciITAAAAAM8yvrfrR23FDpltM8Luz9QB_8O0&co=aHR0cHM6Ly93d3cubWVhc3VyZXRoYXQubmV0OjQ0Mw..&hl=en&v=M-QqaF9xk6BpjLH22uHZRhXt&size=normal&cb=snbga8ckkqeu" width="304" height="78" role="presentation" name="a-ah32scue0a5s" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox" data-precheck="false"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;" data-precheck="false"></textarea></div><iframe style="display: none;"></iframe></div> <span class="field-validation-valid text-danger" data-valmsg-for="ReCaptcha" data-valmsg-replace="true" data-precheck="false"></span> </div> <div class="alert alert-warning" role="alert"> To avoid adding broken tests, please use <strong data-precheck="false">Validate benchmark</strong> button to check for errors in benchmark definition. </div> <div style="display:none" id="validation_log_holder"> <h5 data-precheck="false">Validation log:</h5> <ul id="validation_log" data-precheck="false"></ul> </div> <a class="btn btn-default" data-role="test-benchmark"> Validate benchmark<span data-precheck="false"> </span> <i id="validate-spinner" class="fa fa-refresh fa-spin" style="font-size:20px;display:none;" data-precheck="false"></i> </a> <input id="benchmark_submit" type="submit" class="btn btn-primary" value="Submit" data-precheck="false"> <a href="/Benchmarks" class="btn btn-link" data-precheck="false">Cancel</a> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8BYV91WYjT9OvOiHKyU7Td8sVLB3r7zcuqkzhquGJ1-r9vFv7FkPJl2mfW73CCgtuAj6gsu9KyDtfJJVchhaL1nfUbcczjsgqpa9Y78co69ikK5He3EBL0UXNipz6XkWsPCL-h5T18udx8EPHzPZHUxruWfTa8h-EU9wSjKsIh0NKX0tPzivEUM5DrzMJ95NOw" data-precheck="false"></form> <div class="hidden"> <textarea data-content="existing-test" data-test-name="TreeWalker" data-precheck="false">const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT ); let element; while (element = treeWalker.nextNode()) { }</textarea> <textarea data-content="existing-test" data-test-name="querySelectorAll" data-precheck="false">const list = document.body.querySelectorAll('*');</textarea> </div> <div id="validation-frame-holder" data-precheck="false"></div> </div> <hr data-precheck="false"> <footer> <p data-precheck="false">© 2022 - MeasureThat.net (Version: 1.3.3.0)</p> </footer> </div><script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" data-precheck="false"> </script> <script data-precheck="false">(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" data-precheck="false"> </script> <script data-precheck="false">(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="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.js" data-precheck="false"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/xml/xml.js" data-precheck="false"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/javascript/javascript.min.js" data-precheck="false"></script> <script src="https://www.google.com/recaptcha/api.js" data-precheck="false"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.min.js" data-precheck="false"></script> <script src="/js/benchmarklab.js?v=u7xTtWrvm6FZPW1nPTf3WFWWTmn7xc_Q8WbQvfFXm58" data-precheck="false"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify.min.js" data-precheck="false"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.min.js" data-precheck="false"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js" data-precheck="false"> </script> <script data-precheck="false">(window.jQuery && window.jQuery.validator||document.write("\u003Cscript src=\u0022\/lib\/jquery-validation\/dist\/jquery.validate.min.js\u0022\u003E\u003C\/script\u003E"));</script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js" data-precheck="false"> </script> <script data-precheck="false">(window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive||document.write("\u003Cscript src=\u0022\/lib\/jquery-validation-unobtrusive\/jquery.validate.unobtrusive.min.js\u0022\u003E\u003C\/script\u003E"));</script> <script id="testCase" type="x-tmpl-mustache" data-precheck="false"> <li class="list-group-item" data-role="testCaseComponent"> <div class="form-group"> <label for="TestCases.TestCaseDtoName">Name your test:</label> <input type="text" class="form-control" placeholder="Name of the test case" data-val="true" data-val-regex="The field Test Case must match the regular expression '[a-zA-Z0-9.`~!@#$%^&*()]'." data-val-regex-pattern="[a-zA-Z0-9.`~!@#$%^&*()]" data-val-required="The Test Case field is required." name="TestCases[{{testCaseId}}].TestCaseDtoName" value="{{testCaseName}}" data-role="testCaseName"> <label for="TestCases.BenchmarkCode">Benchmark code</label> <textarea class="form-control" data-val="true" placeholder="Benchmark code" data-val-required="The Benchmark code is required." name="TestCases[{{testCaseId}}].BenchmarkCode" data-role="testCaseCode">{{textCaseContent}}</textarea> <span class="field-validation-valid text-danger" data-valmsg-for="TestCases.BenchmarkCode" data-valmsg-replace="true"></span> </div> <div class="form-group text-right"> <button data-action="delete-test" class="btn btn-default">Delete test case</button> </div> </li> </script> <script type="text/javascript" data-precheck="false"> var addPageController = new AddNewTestPageController(); new AppendSnippetHandler(); new ClientValidationHandler(); new InputFormatHandler(); </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" data-precheck="false">×</button> <h4 class="modal-title" id="myModal-label" data-precheck="false">About</h4> </div> <div class="modal-body"> <h2 data-precheck="false">JavaScript performance benchmarks</h2> <p><b data-precheck="false">Source code:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net" data-precheck="false">GitHub/MeasureThat.net</a></p> <p><b data-precheck="false">Report issues:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net/issues" data-precheck="false">MeasureThat.net/Issues</a> </p><p><b data-precheck="false">Based on:</b> <a target="_blank" href="https://benchmarkjs.com/" data-precheck="false">Benchmark.js (v2.1.1)</a> </p><p> <b data-precheck="false">Facebook page:</b> <a target="_blank" href="https://www.facebook.com/MeasureThat.Net" data-precheck="false">https://www.facebook.com/MeasureThat.Net</a> </p> <p> <b data-precheck="false">Open the </b> <a target="_blank" href="/Home/Changelog" data-precheck="false">changelog</a> </p> <style data-precheck="false">.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" data-precheck="false"><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" data-precheck="false"><span style="margin-left:5px" data-precheck="false">Buy me a coffee</span></a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" data-precheck="false">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" data-precheck="false">×</button> <h4 class="modal-title" id="authenticateModal-label" data-precheck="false">Log in:</h4> </div> <div class="modal-body" style="text-align: center"> <section data-precheck="false"> </section> <section> <a class="btn btn-primary" href="/Account/Login" data-precheck="false">Sign in with local account</a> </section> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" data-precheck="false">Cancel</button> </div> </div> </div> </div> <script data-precheck="false"> (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" data-precheck="false"></script> <script data-precheck="false"> 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" data-precheck="false"></script> <style type="text/css"> :root{ --fileIconPostAll :url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBmaWxsPScjZDgzYjNiJyB3aWR0aD0iNzAwcHQiIGhlaWdodD0iNzAwcHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDcwMCA3MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMTA1IDB2NTYwaDQ1NXYtMzg1aC0xNzV2LTE3NXptMzE1IDB2MTQwaDE0MHoiLz4KPC9zdmc+Cg=='); --iconGoggle : url("chrome-extension://fgbnfgkceoofgcfedncdgpalnlgcploa/images/google_Icon.webp") }</style><div style="background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px; position: absolute; transition: visibility 0s linear 0.3s, opacity 0.3s linear 0s; opacity: 0; visibility: hidden; z-index: 2000000000; left: 0px; top: -10000px;"><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2000000000; background-color: rgb(255, 255, 255); opacity: 0.05;"></div><div class="g-recaptcha-bubble-arrow" style="border: 11px solid transparent; width: 0px; height: 0px; position: absolute; pointer-events: none; margin-top: -11px; z-index: 2000000000;"></div><div class="g-recaptcha-bubble-arrow" style="border: 10px solid transparent; width: 0px; height: 0px; position: absolute; pointer-events: none; margin-top: -10px; z-index: 2000000000;"></div><div style="z-index: 2000000000; position: relative;"><iframe title="recaptcha challenge expires in two minutes" src="https://www.google.com/recaptcha/api2/bframe?hl=en&v=M-QqaF9xk6BpjLH22uHZRhXt&k=6LezciITAAAAAM8yvrfrR23FDpltM8Luz9QB_8O0" name="c-ah32scue0a5s" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox" style="width: 100%; height: 100%;"></iframe></div></div></body>
Tests:
TreeWalker
var div = document.body; var treeWalker = document.createTreeWalker( div, NodeFilter.SHOW_ELEMENT, ); while(treeWalker.nextNode()) { console.log(treeWalker.currentNode.nodeValue.trim()); }
querySelectorAll
const list = document.body.querySelectorAll('*');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
TreeWalker
querySelectorAll
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):
I can help you analyze the provided information. It appears to be a benchmarking report for two web page loading benchmarks: TreeWalker and querySelectorAll. The report includes metadata about the browser, device platform, operating system, and execution frequency per second. Here are some key observations: 1. **Browser**: Chrome 102 is used as the browser for both benchmarks. 2. **Device Platform**: Desktop platform is specified for both benchmarks. 3. **Operating System**: Windows operating system is mentioned for both benchmarks. 4. **Test Results**: * querySelectorAll benchmark shows an execution frequency of 64870.03125 executions per second, indicating a fast loading time. * TreeWalker benchmark results in an execution frequency of 0.0 executions per second, suggesting that this benchmark may be slow or has failed. 5. **HTML Code**: The provided HTML code includes a Google reCAPTCHA widget and some CSS styles. To answer the question, I need more context about what you would like to know or achieve with this benchmarking report. Would you like me to: A) Interpret the results of the benchmarks B) Analyze the HTML code for any potential issues C) Provide suggestions on how to improve the performance of the TreeWalker benchmark D) Something else?
Related benchmarks:
ID vs CLASS vs ID CLASS vs CLASS > CLASS vs DATA
jQuery text() vs html()
querySelector vs getElementsByClassName - large HTML
querySelector vs getElementsByClassName ccc2
Comments
Confirm delete:
Do you really want to delete benchmark?