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"); }

Historical Performance Data aggregated from 35 community runs

Desktop Results:

Chrome 27 runs

style.display = none

375/s

classList add hide

356/s

View exact numbers

✓ style.display = none: 375 ops/sec
• classList add hide: 356 ops/sec

Firefox 8 runs

classList add hide

352/s

style.display = none

235/s

Fastest: classList add hide (1.5x faster)

View exact numbers

✓ classList add hide: 352 ops/sec
• style.display = none: 235 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser/OS: Chrome 149 on Windows

View result in a separate tab

style.display = none

712/s

classList add hide

652/s

View exact numbers

Test name	Executions per second
✓ style.display = none	712 Ops/sec
classList add hide	652 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.

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

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

Created: 8 years ago by: Guest

Go to the latest result

style.display = none

classList add hide

Historical Performance Data aggregated from 35 community runs

Desktop Results:

Chrome 27 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 8 years ago by: Guest

Go to the latest result

style.display = none

classList add hide

Historical Performance Data aggregated from 35 community runs

Desktop Results:

Chrome 27 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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