Benchmark: window.getComputedStyle vs. className vs. className / contains

HTML Preparation code:

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

Tests:

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

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

I'll dive into explaining the benchmark.

**What is being tested?**

MeasureThat.net is testing three different approaches to check if an HTML element has a `display` property set to `none`. The elements are checked using:

1. **`window.getComputedStyle(document.getElementById(element), null).getPropertyValue("display").indexOf('none') === -1`**: This approach uses the `getComputedStyle()` method to get the computed style of the element, specifically the value of the `display` property. It then checks if the `indexOf('none')` returns `-1`, which means the `display` property is not set to `none`.
2. **`document.getElementById(element).className.indexOf('hide') === -1`**: This approach uses the `className` property of the element to check if it contains the string `'hide'`. The idea is that if the element has a class named `hide`, its `display` property should be set to `none`.
3. **`document.getElementById(element).classList.contains('hide')`**: This approach uses the `classList` property (introduced in HTML5) to check if the element contains the string `'hide'`. Similar to the previous approach, it assumes that having a class named `hide` means its `display` property is set to `none`.

**Options compared**

The three approaches are being compared to determine which one is the most efficient.

**Pros and cons of each approach:**

1. **`window.getComputedStyle()`**:
	* Pros:
		+ Accurate, as it gets the actual computed style of the element.
	* Cons:
		+ Can be slower due to the extra overhead of getting the computed style.
2. **`className`**:
	* Pros:
		+ Simple and straightforward.
	* Cons:
		+ May not work in all cases (e.g., if the `display` property is set using CSS styles that are not included in the element's class list).
3. **`classList.contains()`**:
	* Pros:
		+ More modern and widely supported than the `className` approach.
	* Cons:
		+ May also have issues with certain CSS styles or class names.

**Library used**

None of these approaches use any specific libraries, but they do rely on built-in JavaScript features like `window.getComputedStyle()`, `document.getElementById()`, and `classList`.

**Special JS feature/syntax**

No special JavaScript features or syntax are used in this benchmark. It only relies on standard JavaScript features.

**Other alternatives**

There may be other approaches to check if an element has a `display` property set to `none`. Some possible alternatives include:

* Using CSS selectors (e.g., `:empty` or `::before` pseudo-classes) to detect the presence of a class named `hide`.
* Using the `style` property directly instead of relying on `window.getComputedStyle()`.
* Using a library like jQuery to simplify the code and make it more efficient.

However, these alternatives are not being tested in this benchmark.

Latest run results:

Run details: (Test run date: 5 years ago)

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

Browser/OS: Chrome 75 on Windows

View result in a separate tab

Test name	Executions per second
getComputedStyle	201.3 Ops/sec
className	924.6 Ops/sec
classList.contains	800.2 Ops/sec

Related benchmarks:

window.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 28 days ago):