Benchmark: style.display vs classList.toggle

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>

Previous results

Test case name	Result
classList.toggle
style.display

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months 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

Test name	Executions per second
classList.toggle	829870.9 Ops/sec
style.display	1102692.5 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 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:

style.display vs classList.toggle (version: 0)

Comparing performance of: classList.toggle vs style.display

Created: 4 years ago by: Guest

Jump to the latest result

classList.toggle

style.display

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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