Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Toggle hidden class to existing element vs. style display
(version: 0)
Comparing performance of:
classListVar vs style
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" class="class1 class2"></div>
Tests:
classListVar
var element = document.getElementById("foo"); var i = 1000; var classListTemp = element.classList; while (i--) { classListTemp.add("hidden"); classListTemp.remove("hidden"); }
style
var element = document.getElementById("foo"); var style = element.style; var i = 1000; while (i--) { style.display="none"; style.display=""; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
classListVar
style
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Browser/OS:
Chrome 130 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=568458" width="100%" height="500px"></iframe>
style
4K/s
classListVar
2K/s
View exact numbers
Test name
Executions per second
✓
style
3,743 Ops/sec
classListVar
1,741 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Explanation** The provided JSON represents two benchmark test cases that compare the performance of two approaches for toggling a hidden class on an element: 1. **Using `classList`**: This approach uses the `classList` property to add and remove classes from the element. 2. **Using CSS `display` style**: This approach directly manipulates the `display` style property of the element. **Options Comparison** The two approaches have different pros and cons: * **Using `classList`**: * Pros: More modern and efficient, as it uses a built-in property that is optimized by the browser. * Cons: May not work in older browsers that don't support this property or have limited CSS feature support. * **Using CSS `display` style**: * Pros: Works in all browsers and platforms, but may be slower due to the need for explicit style manipulation. * Cons: Less efficient than using `classList`, as it requires more JavaScript code and computation. **Library and Special JS Features** Neither of the benchmark test cases uses any external libraries. However, they do utilize a special JavaScript feature: * **`classList`**: This is a modern property that provides an interface to manage classes on an element. It was introduced in ECMAScript 2015 (ES6) and is widely supported by modern browsers. **Other Alternatives** If you wanted to explore other approaches, here are some alternatives: * **Using `getAttribute()` and `setAttribute()`**: You can use these methods to set and get attribute values on an element, which could be used to toggle a class. * **Using CSS classes with `addEventListener`**: You can add event listeners for the `classlistchange` event, which is triggered when a class is added or removed from the element. However, these alternatives would likely have different performance characteristics and may not be as efficient as using `classList`. In summary, the two benchmark test cases compare the performance of using `classList` versus CSS `display` style to toggle a hidden class on an element. The approach using `classList` is generally more modern and efficient, but may not work in older browsers or platforms.
Related benchmarks
style.display vs classList.toggle
classList toggle false vs. classList remove
getElementById vs id toggling class
Comments
Confirm delete:
Do you really want to delete benchmark?