Benchmark: style.display = none vs. classList add hide

HTML Preparation code:

<style type="text/css">
        .hide {
            display: none;
        }
</style>
<div id="foo"></div>

Tests:

style.display = none
var element = document.getElementById("foo"); var i = 3000; while (i--) { element.style.display = 'none'; element.style.display = 'block'; }
classList add hide
var element = document.getElementById("foo"); var i = 3000; while (i--) { element.classList.add("hide"); element.classList.remove("hide"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.display = none
classList add hide

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 146 on Android

View result in a separate tab

Test name	Executions per second
style.display = none	274.4 Ops/sec
classList add hide	202.4 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 benchmark and its test cases.

**Benchmark Overview**

The benchmark is comparing two approaches to hide an HTML element:

1. `style.display = 'none'`
2. `classList.add('hide')` followed by `classList.remove('hide')`

These two approaches are being tested on a HTML element with the ID "foo" in a Firefox 130 browser running on Ubuntu.

**Test Case Explanations**

### Test Case 1: `style.display = 'none'`

This test case uses a traditional CSS approach to hide the element. It sets the `display` property of the element to `'none'`, which means the element will be completely removed from the document flow and no longer visible.

Pros:

* Simple and well-supported by most browsers.
* Fast and efficient, as it only affects the element's layout.

Cons:

* Can lead to additional CSS rules being applied if not used carefully (e.g., `display: none` can affect other elements).
* May cause issues with accessibility features like screen readers.

### Test Case 2: `classList.add('hide')` followed by `classList.remove('hide')`

This test case uses the `classList` API to add and remove a CSS class named "hide" from the element. This approach is more modern and flexible than using `style.display`.

Pros:

* More precise control over styling, as classes can be used for multiple purposes.
* Can be used in conjunction with other CSS rules (e.g., hover effects) without affecting other elements.

Cons:

* Requires support for the `classList` API, which may not be available in older browsers.
* May require additional CSS rules to maintain accessibility features like screen readers.

**Library Used**

The `classList` API is a built-in feature of modern web browsers (Chrome, Firefox, Edge, Safari) and can also be used in JavaScript with libraries like jQuery or Lodash. In this benchmark, it's being used directly in the test case scripts.

**Special JS Feature/Syntax**

In this benchmark, no special JavaScript features or syntax are being used beyond standard ES6 JavaScript. If any specific features were being tested, they would be explained alongside the relevant test cases.

**Other Alternatives**

For hiding elements, other approaches include:

1. Using `style.visibility = 'hidden'`: This approach is similar to `display: none`, but preserves the element's original dimensions and layout.
2. Using a CSS media query with `display: none`: This approach can be used in conjunction with responsive design and ensures that the element is hidden only for specific screen sizes or orientations.

These alternatives are not being tested in this benchmark, as they were not part of the original test case definitions.

Related benchmarks:

style.display = none vs. classList add hide (version: 0)

Comparing performance of: style.display = none vs classList add hide

Created: 8 years ago by: Guest

Jump to the latest result

style.display = none

classList add hide

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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