Benchmark: Toggle hidden attribute vs toggle display:none / visibility:hidden styles

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>

Previous results

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: 5 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser/OS: Chrome 149 on Windows

View result in a separate tab

Test name	Executions per second
Attribute	3364721.2 Ops/sec
modify styles - visibility hidden	1448534.9 Ops/sec
modify style display none	1338764.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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:

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

Attribute

modify styles - visibility hidden

modify style display none

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):