Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Toggle hidden attribute vs toggle display:none / visibility:hidden styles
(version: 0)
Comparing performance of:
Attribute vs modify styles - visibility hidden vs modify style display none
Created:
6 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id='toggle-visibility-here'> <div>children</div> </div>
Tests:
Attribute
const element = document.getElementById('toggle-visibility-here'); element.hidden = !element.hidden;
modify styles - visibility hidden
const element = document.getElementById('toggle-visibility-here'); element.style.visibility = element.style.visibility==='hidden' ? 'visible' : 'hidden';
modify style display none
const element = document.getElementById('toggle-visibility-here'); element.style.display = element.style.display==='none' ? 'initial' : 'none';
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Attribute
modify styles - visibility hidden
modify style display none
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36
Browser/OS:
Chrome 145 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Attribute
13465362.0 Ops/sec
modify styles - visibility hidden
7309905.5 Ops/sec
modify style display none
6484781.5 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and its test cases. **What is being tested?** MeasureThat.net is testing three different approaches to toggle the visibility of an HTML element: 1. Setting the `hidden` attribute directly on the element (`Attribute` test case). 2. Setting the `visibility` style property to `'visible'` if it's currently set to `'hidden'`, otherwise setting it to `'hidden'` (modify styles - visibility hidden test case). 3. Setting the `display` style property to `'initial'` if it's currently set to `'none'`, otherwise setting it to `'none'` (modify style display none test case). **Options being compared** The three approaches are compared in terms of their performance and execution speed. **Pros and Cons of each approach:** 1. **Setting `hidden` attribute directly**: * Pros: Simple and straightforward, no extra styles need to be applied. * Cons: May not be supported by older browsers or those with specific CSS quirks. 2. **Modify styles - visibility hidden**: * Pros: More widely supported across browsers, as it leverages the `visibility` property. * Cons: Requires two style checks and assignments, which might lead to slower execution. 3. **Modify style display none**: * Pros: Similar to the second approach, but uses the `display` property instead of `visibility`. * Cons: Also requires two style checks and assignments. **Library usage** None of the test cases use any external libraries. **Special JS features or syntax** None are mentioned in the provided benchmark. However, it's worth noting that these tests do rely on basic JavaScript concepts, such as: * DOM manipulation (e.g., `document.getElementById()`, `element.hidden = !element.hidden;`) * Basic conditional statements (if-else) * Style property manipulation (setting values using dot notation) **Alternatives** If the benchmark results are inconclusive or you'd like to explore alternative approaches, consider these options: 1. **Using CSS classes**: Instead of setting styles directly on the element, use a separate CSS class for visibility control. 2. **Utilizing `CSS` APIs**: Explore modern CSS APIs like `requestAnimationFrame()` or `Web APIs' performance optimizations`. 3. **Implementing a custom solution**: Develop a custom function to toggle visibility using JavaScript and evaluate its performance. Keep in mind that these alternatives might require modifications to the benchmark setup and execution scripts. When interpreting these benchmarks, consider the following: * Are you targeting older browsers or specific hardware configurations? Adjust your testing accordingly. * How will you apply the results of this benchmark to your production code? * Are there other factors (e.g., caching, parallel execution) that could impact performance? By considering these questions and alternatives, you'll be better equipped to understand the results of the benchmark and make informed decisions about your JavaScript development.
Related benchmarks:
visibility vs display
style.display vs classList.toggle
getElementById vs id toggling class
getElementById vs id vs wrapper toggling class
Comments
Confirm delete:
Do you really want to delete benchmark?