Benchmark: Toggle hidden class to existing element vs. style display

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>

Previous results

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

Test name	Executions per second
classListVar	1741.2 Ops/sec
style	3743.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**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:

Toggle hidden class to existing element vs. style display (version: 0)

Comparing performance of: classListVar vs style

Created: 3 years ago by: Guest

Jump to the latest result

classListVar

style

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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