Benchmark: getComputedStyle vs. className vs. className / contains

HTML Preparation code:

<div id="foo"></div>

Tests:

getComputedStyle
var i = 3000; var el = document.getElementById('foo'); while (i--) { chekele(el); } function chekele(element) { return window.getComputedStyle(element, null).getPropertyValue("display").indexOf('none') === -1; }
className
var i = 3000; var el = document.getElementById('foo'); while (i--) { chekele(el); } function chekele(element) { return element.className.indexOf('hide') === -1; }
classList.contains
var i = 3000; var el = document.getElementById('foo'); while (i--) { chekele(el); } function chekele(element) { return element.classList.contains('hide'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getComputedStyle
className
classList.contains

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
getComputedStyle	472.9 Ops/sec
className	19525.6 Ops/sec
classList.contains	6104.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to check if an element has a `display` property set to `none`:

1. Using `getComputedStyle(element, null).getPropertyValue("display").indexOf('none') === -1`
2. Using `element.className.indexOf('hide') === -1`
3. Using `element.classList.contains('hide')`

**Approach 1: getComputedStyle**

This approach uses the `window.getComputedStyle` function to retrieve the computed style of an element, specifically the `display` property value. The `indexOf` method is then used to check if `'none'` is present in the value.

Pros:

* This approach is more accurate because it checks for the exact value of the `display` property.
* It's a standard JavaScript function that doesn't require any additional libraries.

Cons:

* This approach can be slower due to the overhead of using a function call and accessing the DOM.
* The performance difference between this and other approaches may not be noticeable in modern browsers, but it's still worth considering.

**Approach 2: className**

This approach uses the `className` property of an element to check if `'hide'` is present. The `indexOf` method is used to find the presence of `'hide'`.

Pros:

* This approach is faster because it only requires accessing a single property and performing a simple string search.
* It's also a standard JavaScript function that doesn't require any additional libraries.

Cons:

* This approach can be less accurate because it only checks for the presence of `'hide'` in the class list, not the exact value of the `display` property.
* It may not work as expected if the element has multiple classes with different values (e.g., `.class1.hide`).

**Approach 3: classList.contains**

This approach uses the `classList.contains()` method to check if `'hide'` is present in the class list of an element.

Pros:

* This approach is faster and more accurate than using `className` because it's designed specifically for checking class presence.
* It's a modern JavaScript function that's supported in most browsers.

Cons:

* This approach requires the use of the `classList` property, which may not be supported in older browsers or in certain environments (e.g., Internet Explorer).

**Library Used**

None of these approaches require any additional libraries beyond standard JavaScript functions. However, if you're using a library like jQuery, you might need to consider its performance impact on your benchmark.

**Special JS Feature/Syntax**

None of these approaches rely on any special JavaScript features or syntax that would affect their behavior or performance.

**Alternatives**

If you want to explore alternative approaches, here are a few options:

* Using `document.querySelector` and accessing the `style` attribute directly (which might be slower than using `getComputedStyle`)
* Using CSS APIs like `window.CSS` (if available in your browser)
* Optimizing the benchmark for specific use cases or requirements

Keep in mind that these alternatives may not offer significant performance improvements over the original three approaches.

Related benchmarks:

getComputedStyle vs. className vs. className / contains (version: 0)

Comparing performance of: getComputedStyle vs className vs classList.contains

Created: 5 years ago by: Guest

Jump to the latest result

getComputedStyle

className

classList.contains

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):