Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
visibility vs display 2
(version: 0)
Comparing performance of:
display vs visibility vs opacity
Created:
5 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<style> d{display:none;} v{visibility:hidden;} o{opacity:0;} </style> <div class="dd d">Lorem Ipsum</div> <div class="vv v">Lorem Ipsum</div> <div class="oo o">Lorem Ipsum</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
Tests:
display
$("dd").toggleClass("d");
visibility
$("vv").toggleClass("v");
opacity
$("oo").toggleClass("o");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
display
visibility
opacity
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'd be happy to explain the provided benchmark. **What is tested?** The benchmark measures the performance of three different CSS properties on HTML elements: 1. **Display**: The `display` property controls how an element is displayed (e.g., visible, hidden, inline, block). In this case, the test toggles the `d` class, which sets the display to "none". 2. **Visibility**: The `visibility` property controls whether an element is visible or not. In this case, the test toggles the `v` class, which sets the visibility to "hidden". 3. **Opacity**: The `opacity` property controls the transparency of an element. In this case, the test toggles the `o` class, which sets the opacity to 0 (fully transparent). **Options compared** The benchmark compares three different approaches for setting these CSS properties: 1. Using the `display` property 2. Using the `visibility` property 3. Using the `opacity` property Each approach is tested separately. **Pros and cons of each approach:** * **Display**: This approach can be faster, as it only requires a single value change. However, if the element's display is already set to "none", this change may not have any noticeable effect. * **Visibility**: This approach can also be fast, as visibility changes are often cached by browsers. However, if the element's visibility is already set to "hidden", this change may not have any noticeable effect either. * **Opacity**: This approach might be slower, as opacity changes require more complex calculations. **Other considerations:** * The benchmark uses jQuery, a popular JavaScript library for DOM manipulation. * The test cases use a specific HTML structure, with three elements (`dd`, `vv`, and `oo`) that are toggled using the respective classes. **Special JS features or syntax:** There is no special JavaScript feature or syntax used in this benchmark. The code uses standard JavaScript techniques to toggle CSS classes. **Other alternatives:** If you wanted to optimize the display, visibility, and opacity properties, you could consider using: * **CSS transformations**: Instead of changing the display, visibility, or opacity values directly, you can use CSS transformations (e.g., `translateX()`, `scale()`) to achieve similar effects. * **Animation libraries**: Libraries like AnimeJS or GSAP provide more advanced animation capabilities that might be suitable for dynamic CSS property changes. Keep in mind that these alternatives would require additional code and might introduce performance overhead. I hope this explanation helps you understand the benchmark!
Related benchmarks:
Check if is visible by classes vs style
visible vs. hasClass
Toggle hidden attribute vs toggle display:none / visibility:hidden styles
visibility vs display
Comments
Confirm delete:
Do you really want to delete benchmark?