Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
1dshvdshvhdsv
(version: 0)
1dvfrsbgstbgn
Comparing performance of:
11 vs 22
Created:
9 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<html> <head></head> <body> <div id="masthead-positioner"> <div id="ticker-content"> </div> <div id="yt-masthead-container" class="clearfix yt-base-gutter"> <button id="a11y-skip-nav" class="skip-nav" data-target-id="content" tabindex="3"> Skip navigation </button> <div id="yt-masthead"><div class="yt-masthead-logo-container "> <button class="yt-uix-button yt-uix-button-size-default yt-uix-button-text yt-uix-button-empty yt-uix-button-has-icon appbar-guide-toggle appbar-guide-clickable-ancestor" type="button" onclick=";return false;" id="appbar-guide-button" aria-controls="appbar-guide-menu" aria-label="Guide" aria-expanded="false"><span class="yt-uix-button-icon-wrapper"><span class="yt-uix-button-icon yt-uix-button-icon-appbar-guide yt-sprite"></span></span></button> <div id="appbar-main-guide-notification-container"></div> <span id="yt-masthead-logo-fragment"><a href="/" class="yt-uix-sessionlink masthead-logo-renderer spf-link " data-sessionlink="itct=CAUQsV4iEwiS8brz5KXPAhWOq5wKHcg6CDco-B0" id="logo-container" title="YouTube Home"> <span class="logo masthead-logo-renderer-logo yt-sprite" title="YouTube Home"></span> </a></span></div><div id="yt-masthead-signin"><a href="//www.youtube.com/upload" class="yt-uix-button yt-uix-sessionlink yt-uix-button-default yt-uix-button-size-default" data-sessionlink="ei=CUjlV9LIDY7X8gTI9aC4Aw&feature=mhsb" id="upload-btn"><span class="yt-uix-button-content">Upload</span></a><div class="signin-container "><button class="yt-uix-button yt-uix-button-size-default yt-uix-button-primary" type="button" onclick=";window.location.href=this.getAttribute('href');return false;" role="link" href="https://accounts.google.com/ServiceLogin?service=youtube&hl=en&uilel=3&continue=https%3A%2F%2Fwww.youtube.com%2Fsignin%3Ffeature%3Dsign_in_button%26hl%3Den%26action_handle_signin%3Dtrue%26next%3D%252Fwatch%253Fv%253DCIdXPIN3j38%26app%3Ddesktop&passive=true"><span class="yt-uix-button-content">Sign in</span></button></div></div><div id="yt-masthead-content"><form id="masthead-search" class="search-form consolidated-form" action="/results" onsubmit="if (document.getElementById('masthead-search-term').value == '') return false;" data-clicktracking="CAIQ7VAiEwiS8brz5KXPAhWOq5wKHcg6CDco-B0" data-visibility-tracking="CAIQ7VAiEwiS8brz5KXPAhWOq5wKHcg6CDco-B0"><button class="yt-uix-button yt-uix-button-size-default yt-uix-button-default search-btn-component search-button" type="submit" onclick="if (document.getElementById('masthead-search-term').value == '') return false; document.getElementById('masthead-search').submit(); return false;;return true;" id="search-btn" dir="ltr" tabindex="2"><span class="yt-uix-button-content">Search</span></button><div id="masthead-search-terms" class="masthead-search-terms-border " dir="ltr"><input id="masthead-search-term" autocomplete="off" onkeydown="if (!this.value && (event.keyCode == 40 || event.keyCode == 32 || event.keyCode == 34)) {this.onkeydown = null; this.blur();}" class="search-term masthead-search-renderer-input yt-uix-form-input-bidi" name="search_query" value="" type="text" tabindex="1" placeholder="Search" title="Search" aria-label="Search" dir="ltr" spellcheck="false" style="outline: none;"></div></form></div></div></div> <div id="masthead-appbar-container" class="clearfix"><div id="masthead-appbar"><div id="appbar-content" class=""></div></div></div> </div> </body> </html>
Tests:
11
function toggleDisabled(TOGGLE_STATE, ...ELEMENTS_ARRAY) { if (TOGGLE_STATE === "on") { var disabled_state = true; } else if (TOGGLE_STATE === "off") { var disabled_state = false; } for (var i = 0; i < ELEMENTS_ARRAY.length; i++) { ELEMENTS_ARRAY[i].disabled = disabled_state; } } small_search_style = document.createElement("style"); small_search_style.textContent = "#masthead-positioner { width: 200px; } #yt-masthead-signin, .yt-masthead-logo-container { float: none !important; } #yt-masthead-signin { margin: 10px 0 !important; }"; document.head.appendChild(small_search_style); search_input_box = document.getElementById("masthead-search-term"); search_input_box.addEventListener("input", function() { toggleDisabled("on", small_search_style) }); search_input_box.addEventListener("blur", function(){ toggleDisabled("off", small_search_style) });
22
small_search_style = document.createElement("style"); small_search_style.textContent = "#masthead-positioner { width: 200px; } #yt-masthead-signin, .yt-masthead-logo-container { float: none !important; } #yt-masthead-signin { margin: 10px 0 !important; }"; document.head.appendChild(small_search_style); search_input_box.oninput=function(){small_search_style.disabled=true;}; search_input_box.onblur=function(){small_search_style.disabled=false;};
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
11
22
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):
**Benchmark Overview** The provided JSON represents a JavaScript microbenchmark created on MeasureThat.net. The benchmark is designed to test the performance of two different approaches for disabling and enabling a CSS style element. **Test Cases** There are two individual test cases: 1. **Test Case 11**: This test case uses a traditional approach, where a separate function `toggleDisabled` is defined to toggle the disabled state of multiple elements in an array. The function takes two arguments: `TOGGLE_STATE` and an array of elements to be toggled. 2. **Test Case 22**: This test case uses a more concise approach, where the style element is assigned a new value directly using the `oninput` event handler. When the input field is focused (i.e., `oninput`), the style element's `disabled` property is set to `true`. Conversely, when the input field loses focus (i.e., `onblur`), the style element's `disabled` property is reset to its original value. **Latest Benchmark Results** The latest benchmark results show two executions per second for each test case: * **Test Case 11**: Firefox 60 on Windows 7 desktop, with 214.035095 executions per second. * **Test Case 22**: Firefox 60 on Windows 7 desktop, with 74.065734 executions per second. **Comparison** Comparing the two approaches, we can see that: * Test Case 11 (traditional approach) outperforms Test Case 22 (concise approach) by a factor of approximately 2.9. * Both test cases are executed at a relatively high rate, indicating efficient code execution. **Conclusion** The results suggest that the traditional approach to toggling CSS styles using a separate function is more efficient than the concise approach, which relies on event handlers to dynamically update style properties. However, it's essential to note that both approaches have their own strengths and weaknesses, and the choice between them depends on specific use cases and performance requirements.
Related benchmarks:
querySelector vs getElementsByClassName - large HTML
querySelector vs getElementsByClassName ccc2
TreeWalker vs querySelectorAll (* all elements) 2
filter vs each
Comments
Confirm delete:
Do you really want to delete benchmark?