Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Jquery find() specificity
(version: 1)
Test speeds of jquery find with different levels of selector specificity.
Comparing performance of:
Only ID vs HTML + Body + ID vs Full path vs Body + ID vs Full path only elements
Created:
3 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script> <script async="" src="https://www.google-analytics.com/analytics.js"></script> <script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/releases/3TZgZIog-UsaFDv31vC4L9R_/recaptcha__en.js" crossorigin="anonymous" integrity="sha384-nj642Dswt64OMaf4UFp40UwuNa9WuFl1G5gXnoedGOGDJvLskRlBpbZYqPjZHeF5"></script> <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>Create benchmark - MeasureThat.net</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <!--<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"> <script> (function t() { ! function() { function f(n, i, r) { i = i || {}; var s = n.ownerDocument || n, a = s.createEvent ? s.createEvent("CustomEvent") : s.createEventObject(); for (var e in a.initCustomEvent && a.initCustomEvent(i.type, !!i.bubbles, !!i.cancelable, i.detail), i) a[e] = i[e]; return setTimeout(function() { try { n.dispatchEvent ? n.dispatchEvent(a) : n.fireEvent("on" + i.type, s.createEventObject()) } catch (o) { var e = n["listen" + i.type]; if (e) for (var t = 0; t < e.length; ++t) try { e[t].call(n, a) } catch (o) {} } r() }, 0), this } function p(e, t, n) { function i(e, t) { try { var n = e.ownerDocument; if (n.createEventObject) { var i = n.createEventObject(); e.fireEvent("on" + t, i) } else(i = n.createEvent("HTMLEvents")).initEvent(t, !0, !0), e.dispatchEvent(i) } catch (r) {} } var r = !0, s = e.className && -1 != e.className.indexOf("fancified"); if (window.jQuery) { var a = window.jQuery(e); try { if (a.selectBoxIt) a.selectBoxIt("selectOption", a.val()); else if (a.data("chosen") || a.chosen) a.trigger("chosen:updated").trigger("liszt:updated"); else if (a.data("chooserElement")) a.trigger("change"); else if (a.fancySelect) a.get("fancySelect").select("value", a.val()); else if (a.selectBox) a.selectBox("value", a.val()); else if (a.selectric) a.selectric("refresh"); else if (a.coreUISelect) { var o = a.data("coreUISelect"); o.isSelectShow = !0, o.changeDropdownData(), o.isSelectShow = !1 } else if (a.data("myJSPulldownObject")) a.data("myJSPulldownObject").setToValue(a.val()); else if (a.fancyfields) a.setVal(a.val()); else if (a.data("select2")); else if (a.data("selectize")) r = !1, a.data("selectize").setValue(a.val()); else if (a.hasClass("fancified")) a.trigger("update"); else if (a.selectmenu) { var l = a.val(); try { a.selectmenu("value", a[0].options[0].value) } catch (c) {} a.selectmenu("value", l) } else a.hasClass("select-hidden") && a.next("div.select-styled").length && a.next("div.select-styled").next(".select-options").length && (ulElement = a.next("div.select-styled").next(".select-options"), liElement = ulElement.find("li[rel='" + a.val() + "']"), liElement.click()); a.trigger("change") } catch (c) {} } r && (s && i(e, "update"), i(e, "change"), i(e, "blur")), n() } function s(t, n, i, r) { var s = t.value; f(t, { type: "keydown", keyCode: n, which: n, charCode: n, bubbles: !0 }, function() { f(t, { type: "keypress", keyCode: n, which: n, charCode: n, bubbles: !0 }, function() { setTimeout(function() { var e = t.value; s == e && (t.value = i), f(t, { type: "input", keyCode: n, which: n, charCode: n, bubbles: !0 }, function() { f(t, { type: "keyup", keyCode: n, which: n, charCode: n, bubbles: !0 }, function() { r() }) }) }, 1) }) }) } function a(e, t, n, i) { if (t && "" != t) { var r = t.charCodeAt(0); n += t.charAt(0), s(e, r, n, function() { a(e, t.substring(1), n, i) }) } else i() } function l(e, t, n) { if (window.abineTriggerChangeInProgress) setTimeout(function() { l(e, t, n) }, 100); else { e.setAttribute("mmautofilling", "now"), e.focus(), e.value = t; var i = !0; window.abineTriggerChangeInProgress = !0; try { if (window.jQuery) { var r = window.jQuery(e); r.data("rawMaskFn") || r.mask || r.CardPhoneFormatting ? r.focus().val(t).trigger("input").trigger("paste") : r.next(".inner").find(".options").length && (i = !1, r.next(".inner").find(".options").find("span").each(function() { var e = $(this); - 1 < $(e).html().toLowerCase().indexOf(t) && $(e).click() })) } } catch (o) {} e.defaultValue = t; try { var s = e._valueTracker; s && s.setValue(t + "old") } catch (o) {} try { e.__preactattr_ && e.__preactattr_.onChange && (e.value = t, e.__preactattr_.onChange({ target: e }), e.click()) } catch (o) {} try { var a = new Event("input", { bubbles: !0, cancelable: !0, data: t }); a.simulated = !0, e.dispatchEvent(a) } catch (o) {} try { f(e, { type: "keyup", keyCode: 38, which: 38, charCode: 38, bubbles: !0 }, function() {}) } catch (o) {} i ? f(e, { type: "change" }, function() { f(e, { type: "blur" }, function() { window.abineTriggerChangeInProgress = !1, e.removeAttribute("mmautofilling"), n() }) }) : (e.removeAttribute("mmautofilling"), window.abineTriggerChangeInProgress = !1, n()) } } function t(e, t, n) { try { e.ownerDocument.defaultView.focus() } catch (i) {} f(e, { type: "focus" }, function() { f(e, { type: "click" }, function() { a(e, t + "\n", "", function() { l(e, t, function() { f(document, { type: "abineFilled" }, function() { n() }) }) }) }) }) } function i(e, t, n, i) { var r = /[\s]+/g, s = (t || "").toLowerCase().replace(r, ""), a = function() { f(document, { type: "abineFilled" }, function() { i() }) }, o = !1, l = !1, c = e.getElementsByTagName("option"); if (c && 0 < c.length) { for (var d = -1, u = 0; u < c.length; u++) { var h = (c[u].text || "").toLowerCase().replace(r, ""); if ((c[u].getAttribute("value") || "").toLowerCase().replace(r, "") == s || h == s) { c[u].selected || (o = !0, c[u].selected = !0), l = !0; break } - 1 == d && -1 != h.indexOf(s) && (d = u) } l || -1 == d || n || c[d].selected || (o = !0, l = c[d].selected = !0) } e.setAttribute("abineFillResponse", l), o ? p(e, t, a) : a() } function r() { if (0 < (t = document.getElementsByClassName("abineFillTarget")).length) return t[0]; for (var e = 0; e < frames.length; e++) try { var t; if (0 < (t = frames[e].document.getElementsByClassName("abineFillTarget")).length) return t[0] } catch (o) {} return null } function e() { var n = document.createElement("div"); n.id = "abineFillElement", "undefined" != typeof paypal && n.setAttribute("data-paypal", "1"), "undefined" != typeof OffAmazonPayments && n.setAttribute("data-amazon", "1"), "undefined" != typeof MasterPass && n.setAttribute("data-masterpass", "1"), document.documentElement.appendChild(n), n.addEventListener("fill", function() { var e = r(); e ? t(e, n.getAttribute("value"), function() {}) : f(document, { type: "abineFilled" }, function() {}) }, !1), n.addEventListener("fillSelect", function() { var e = r(); e ? i(e, n.getAttribute("value"), !!n.getAttribute("skipPartial"), function() {}) : f(document, { type: "abineFilled" }, function() {}) }), n.addEventListener("triggerChange", function() { var e = r(), t = n.getAttribute("value"); e && (e.nodeName.match(/select/i) ? p(e, t, function() {}) : l(e, t, function() {})) }) } e() }() })() </script> </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&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."></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 voxorin@protonmail.com!</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="CfDJ8EwSioSzwhNEoj7gZ7R_MGTwXA3E11W-uU8PPLLa3eqxIGLPkylIKR9KjUP6X5Yw5EtQAnc3IBG1FDMuzi01OUUDZ0z0dJ_hlQ5lQO8Z3f0u3q9Ac8SgYEih6o1Q0Jy9idrNgFWAcnj8FCKOp1FKgEhmWLWa8CvVudkBq7720wSdDgV6yabPjI2_qZWeRAkBig"> </form> </div> </div> </div> <div class="container body-content"> <div class="row"> <div class="page-header"> <h1>Create benchmark</h1> </div> <form action="/Benchmarks/Add" id="new-benchmark-form" method="post" abineguid="E5B2DEF914324E7082C0384ADA25D38E" novalidate="novalidate"> <div class="validation-summary-valid" data-valmsg-summary="true"> <ul> <li style="display:none"></li> </ul> </div><input data-val="true" data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="0"> <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"> 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">Benchmark Name</label> <input class="form-control valid" 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="" data-com.bitwarden.browser.user-edited="yes" aria-required="true" aria-invalid="false" aria-describedby="BenchmarkName-error"> <span id="dup-title" class="text-danger field-validation-error" style="display:none">Benchmark with such name already exists.</span> <span class="text-danger field-validation-valid" data-valmsg-for="BenchmarkName" data-valmsg-replace="true"></span> </div> <div class="form-group"> <label for="Description">Description</label> <textarea class="form-control valid" 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" aria-invalid="false" aria-describedby="Description-error"></textarea> <span class="text-danger field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></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"> 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">Html Preparation code</label> <textarea class="form-control" id="HtmlPreparationCode" name="HtmlPreparationCode" style="display: none;"></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"></textarea></div> <div class="CodeMirror-vscrollbar" cm-not-content="true"> <div style="min-width: 1px; height: 0px;"></div> </div> <div class="CodeMirror-hscrollbar" cm-not-content="true"> <div style="height: 100%; min-height: 1px; width: 0px;"></div> </div> <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div> <div class="CodeMirror-gutter-filler" cm-not-content="true"></div> <div class="CodeMirror-scroll" tabindex="-1"> <div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -14px; border-right-width: 16px; 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"><span><span></span>x</span></div> <div class="CodeMirror-measure"></div> <div style="position: relative; z-index: 1;"></div> <div class="CodeMirror-cursors" style=""> <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;">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: 16px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div> <div class="CodeMirror-gutters" style="height: 44px;"> <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div> </div> </div> </div> <span class="field-validation-valid text-danger" data-valmsg-for="HtmlPreparationCode" data-valmsg-replace="true"></span> <br> <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"></span> </button> <ul class="dropdown-menu"> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<div id=''></div>"><div/></a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<a id='' href='#' />"><a/></a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<canvas id='' width='' height=''></canvas>"><canvas/></a></li> <li><a data-role="insert-snippet" data-target="HtmlPreparationCode" data-text="<script src=''></script>"><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"></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>">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>">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>">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>">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>">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>">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>">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>">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>">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"> Format HTML </button> </div> <hr> <div class="form-group"> <label for="ScriptPreparationCode">JavaScript preparation code</label> <textarea class="form-control" id="ScriptPreparationCode" name="ScriptPreparationCode" style="display: none;"></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"></textarea></div> <div class="CodeMirror-vscrollbar" cm-not-content="true"> <div style="min-width: 1px; height: 0px;"></div> </div> <div class="CodeMirror-hscrollbar" cm-not-content="true"> <div style="height: 100%; min-height: 1px; width: 0px;"></div> </div> <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div> <div class="CodeMirror-gutter-filler" cm-not-content="true"></div> <div class="CodeMirror-scroll" tabindex="-1"> <div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -14px; border-right-width: 16px; 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>1</div> </div> </div> <div class="CodeMirror-measure"></div> <div style="position: relative; z-index: 1;"></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;">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: 16px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div> <div class="CodeMirror-gutters" style="height: 44px;"> <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div> </div> </div> </div> <span class="field-validation-valid text-danger" data-valmsg-for="ScriptPreparationCode" data-valmsg-replace="true"></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"></span> </button> <ul class="dropdown-menu"> <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="for(i=0; i<10; i++){}">For loop</a></li> <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="var arr = ['', '', ''];">Array</a></li> <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="var el = document.getElementById('');">document.getElementById</a></li> <li><a data-role="insert-snippet" data-target="ScriptPreparationCode" data-text="console.log('');">console.log</a></li> </ul> </div> <button type="button" class="btn btn-default" data-target="ScriptPreparationCode" data-format-type="js" data-role="format-input"> 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"> 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">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="" 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[0].BenchmarkCode" data-role="testCaseCode" style="display: none;"></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"></textarea></div> <div class="CodeMirror-vscrollbar" cm-not-content="true"> <div style="min-width: 1px; height: 0px;"></div> </div> <div class="CodeMirror-hscrollbar" cm-not-content="true"> <div style="height: 100%; min-height: 1px; width: 0px;"></div> </div> <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div> <div class="CodeMirror-gutter-filler" cm-not-content="true"></div> <div class="CodeMirror-scroll" tabindex="-1"> <div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -14px; border-right-width: 16px; 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>1</div> </div> </div> <div class="CodeMirror-measure"></div> <div style="position: relative; z-index: 1;"></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;">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: 16px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div> <div class="CodeMirror-gutters" style="height: 44px;"> <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div> </div> </div> </div> <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> <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[1].TestCaseDtoName" value="" 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[1].BenchmarkCode" data-role="testCaseCode" style="display: none;"></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"></textarea></div> <div class="CodeMirror-vscrollbar" cm-not-content="true"> <div style="min-width: 1px; height: 0px;"></div> </div> <div class="CodeMirror-hscrollbar" cm-not-content="true"> <div style="height: 100%; min-height: 1px; width: 0px;"></div> </div> <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div> <div class="CodeMirror-gutter-filler" cm-not-content="true"></div> <div class="CodeMirror-scroll" tabindex="-1"> <div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: -14px; border-right-width: 16px; 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>1</div> </div> </div> <div class="CodeMirror-measure"></div> <div style="position: relative; z-index: 1;"></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;">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: 16px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div> <div class="CodeMirror-gutters" style="height: 44px;"> <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div> </div> </div> </div> <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> </ul> <div class="panel-footer"> <span class="field-validation-valid text-danger" data-valmsg-for="TestCases" data-valmsg-replace="true"></span> <div class="form-group"> <input type="button" class="btn btn-default" data-action="new-test" value="Add test case"> </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=3TZgZIog-UsaFDv31vC4L9R_&size=normal&cb=abh8zfx41l1h" width="304" height="78" role="presentation" name="a-3loynnqx30e1" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></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;"></textarea> </div><iframe style="display: none;"></iframe> </div> <span class="field-validation-valid text-danger" data-valmsg-for="ReCaptcha" data-valmsg-replace="true"></span> </div> <div class="alert alert-warning" role="alert"> To avoid adding broken tests, please use <strong>Validate benchmark</strong> button to check for errors in benchmark definition. </div> <div style="display:none" id="validation_log_holder"> <h5>Validation log:</h5> <ul id="validation_log"></ul> </div> <a class="btn btn-default" data-role="test-benchmark"> Validate benchmark<span> </span> <i id="validate-spinner" class="fa fa-refresh fa-spin" style="font-size:20px;display:none;"></i> </a> <input id="benchmark_submit" type="submit" class="btn btn-primary" value="Submit"> <a href="/Benchmarks" class="btn btn-link">Cancel</a> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8EwSioSzwhNEoj7gZ7R_MGTwXA3E11W-uU8PPLLa3eqxIGLPkylIKR9KjUP6X5Yw5EtQAnc3IBG1FDMuzi01OUUDZ0z0dJ_hlQ5lQO8Z3f0u3q9Ac8SgYEih6o1Q0Jy9idrNgFWAcnj8FCKOp1FKgEhmWLWa8CvVudkBq7720wSdDgV6yabPjI2_qZWeRAkBig"> </form> <div class="hidden"> </div> <div id="validation-frame-holder"></div> </div> <hr> <footer> <p>© 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"> </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="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> <script src="https://www.google.com/recaptcha/api.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.min.js"></script> <script src="/js/benchmarklab.js?v=u7xTtWrvm6FZPW1nPTf3WFWWTmn7xc_Q8WbQvfFXm58"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"> </script> <script> (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"> </script> <script> (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"> <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"> 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">×</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> <p><b>Based on:</b> <a target="_blank" href="https://benchmarkjs.com/">Benchmark.js (v2.1.1)</a> </p> <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> <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=3TZgZIog-UsaFDv31vC4L9R_&k=6LezciITAAAAAM8yvrfrR23FDpltM8Luz9QB_8O0" name="c-3loynnqx30e1" 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> <div id="abineFillElement"></div> </html>
Script Preparation code:
var elementID = '#collapseThree';
Tests:
Only ID
$.find(elementID);
HTML + Body + ID
$.find('html body ' + elementID);
Full path
$.find('html body div.container.body-content div.row form#new-benchmark-form div#accordion.panel-group div.panel.panel-default div.panel-collapse.collapse.in' + elementID);
Body + ID
$.find('body ' + elementID);
Full path only elements
$.find('html body div div form div div div' + elementID);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
Only ID
HTML + Body + ID
Full path
Body + ID
Full path only elements
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'll do my best to provide a solution to the problem. Based on the provided HTML code and test cases, it appears that we are dealing with a JavaScript benchmarking scenario where we need to measure the performance of a function call (`$.find(elementID)`) under different conditions (e.g., using only an ID, adding path elements, etc.). To solve this problem, I would propose the following approach: 1. Create a test harness that loads the provided HTML code in a browser or Node.js environment. 2. Define the `$.find` function to be measured, which should accept an `elementID` parameter and return the corresponding DOM element. 3. For each test case, modify the `elementID` parameter to match one of the test cases: * Only ID: use a unique ID (e.g., "myId") * HTML + Body + ID: use a path like `/html/body/div/container/body-content/div/row/form/div/div/div/myId` * Full path: use a similar path as above, but with additional elements (`/html/body/div/div/form/div/div/div/myId`) * Body + ID: use a path like `/body/myId` * Full path only elements: use a path without the `html/body` parts (e.g., `/div/form/div/div/div/myId`) 4. Measure the execution time of the modified `$find(elementID)` function call for each test case using a profiling tool or by executing multiple iterations of the function and measuring the total time. 5. Repeat steps 2-4 for each test case to ensure consistent results. To provide a more concrete answer, I would need to know the specific requirements of the problem, such as: * What programming language is being used (JavaScript, Node.js, etc.)? * Are there any specific performance metrics or thresholds that need to be met? * Are there any other factors that need to be considered when measuring the performance (e.g., network latency, CPU usage)? If you provide more information about these requirements, I can try to offer a more detailed solution.
Related benchmarks:
provaffdfd
Find item in array
Find item in array - Fork
Pefromance IndexOf
Underscore.js _forEach() vs Native for loop for large arrays (rewrite)
Comments
Confirm delete:
Do you really want to delete benchmark?