Benchmark: window.getComputedStyle vs getAttribute

HTML Preparation code:

<div id="foo" data-attr="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; }
getAttribute
var i = 3000; while (i--) { chekele('foo'); } function chekele(element) { return document.getElementById(element).getAttribute('data-attr'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getComputedStyle
getAttribute

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

Test name	Executions per second
getComputedStyle	457.6 Ops/sec
getAttribute	3229.2 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 explain what's being tested.

**Benchmark Overview**

The benchmark is comparing two approaches to check if an element with a specific attribute exists: `window.getComputedStyle` and `getAttribute`. The test case uses a simple HTML page with a single `<div>` element having a `data-attr` attribute set to "foo".

**Options Compared**

There are two options being compared:

1. **`window.getComputedStyle`**: This method retrieves the computed style of an element, including its display property. In this case, it checks if the `display` property is not equal to `'none'`, which would indicate that the element exists.
2. **`getAttribute`**: This method returns the value of a specific attribute on an element. In this case, it retrieves the value of the `data-attr` attribute.

**Pros and Cons**

* **`window.getComputedStyle`**:
	+ Pros: Can be useful for checking complex styles or properties that aren't easily accessible through attributes.
	+ Cons: Requires accessing the DOM tree, which can be slower than direct attribute access.
* **`getAttribute`**:
	+ Pros: Faster and more lightweight, as it only accesses the element's attributes directly.
	+ Cons: May not work for elements without the specified attribute or for attributes that are not present.

**Library Usage**

There is no explicit library usage in this benchmark. However, `window.getComputedStyle` relies on the Web API to access the DOM tree and retrieve computed styles.

**Special JS Features/Syntax**

None of the provided test cases use any special JavaScript features or syntax. They are straightforward and focus on comparing two basic approaches.

**Alternatives**

Other alternatives for checking element existence could include:

* Using `element.matches()` with a CSS selector
* Implementing a custom function to check attribute presence (e.g., using a regex)
* Utilizing a library like jQuery or Lodash, which provide more convenient ways to work with elements and attributes.

Keep in mind that the choice of approach depends on the specific use case and performance requirements.

Related benchmarks:

window.getComputedStyle vs getAttribute (version: 0)

Comparing performance of: getComputedStyle vs getAttribute

Created: 6 years ago by: Guest

Jump to the latest result

getComputedStyle

getAttribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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