Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
style.display vs classList.toggle
(version: 0)
Comparing performance of:
classList.toggle vs style.display
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<style type="text/css"> .hide { display: none; } </style> <div id="foo"></div>
Tests:
classList.toggle
document.getElementById("foo").classList.toggle("hide"); document.getElementById("foo").classList.toggle("hide");
style.display
document.getElementById("foo").style.display = "none"; document.getElementById("foo").style.display = "block";
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
classList.toggle
style.display
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Browser/OS:
Chrome 137 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=610563" width="100%" height="500px"></iframe>
style.display
1.1M/s
classList.toggle
830K/s
View exact numbers
Test name
Executions per second
✓
style.display
1,102,692 Ops/sec
classList.toggle
829,871 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON and explain what is being tested, the options compared, their pros and cons, and other considerations. **Benchmark Test** The test compares two methods to hide an HTML element: using `classList.toggle` with a CSS class (`hide`) versus setting `style.display` directly. The goal is to determine which method is faster and more efficient for this specific use case. **Options Compared** 1. **classList.toggle**: This method uses the `classList` property to toggle the presence of the `hide` CSS class on an element. It is a convenient way to enable or disable styles without modifying the HTML. 2. **style.display**: This method sets the `display` style property directly, which forces the element to be hidden. **Pros and Cons** 1. **classList.toggle**: * Pros: Easy to use, no extra CSS classes needed, and works with a wide range of browser support (even older browsers that don't understand `style.display`). * Cons: Might not be as efficient as setting `style.display` directly, especially if the element is already hidden. 2. **style.display**: * Pros: Can be faster and more efficient, as it sets the style property directly without adding any extra overhead. * Cons: Requires knowledge of CSS properties and might break in older browsers or with non-standard styles. **Library Used** In this benchmark, there is no specific library being tested. However, some JavaScript libraries (e.g., jQuery) provide alternative ways to hide elements using `hide()` methods or similar constructs. **Special JS Features/Syntax** There are no special JS features or syntax mentioned in the benchmark, such as async/await, generators, or Web Workers. **Benchmark Preparation Code and Individual Test Cases** The preparation code includes a simple HTML structure with an element (`<div id="foo"></div>`) that will be hidden. The test cases define two individual tests: 1. `classList.toggle`: Tests the performance of toggling the `hide` class using `classList.toggle`. 2. `style.display`: Tests the performance of setting `style.display` directly to hide the element. **Latest Benchmark Result** The latest benchmark result shows that Firefox 100 performs better with `classList.toggle`, executing around 314,080 more times per second than `style.display`. This suggests that using `classList.toggle` might be a more efficient approach for this specific use case.
Related benchmarks
classList toggle vs. classList add hide
classList toggle false vs. classList remove
Toggle hidden class to existing element vs. style display
getElementById vs id toggling class
Comments
Confirm delete:
Do you really want to delete benchmark?