Benchmark: hasAttribute vs getAttribute vs dataset

HTML Preparation code:

<div id="foo" data-foo="foo_id"></div>

Tests:

getAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.getAttribute("data-foo"); }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.dataset.foo; }
has attr
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.hasAttribute("data-foo"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttribute
dataset
has attr

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Windows

View result in a separate tab

Test name	Executions per second
getAttribute	87892.3 Ops/sec
dataset	869.7 Ops/sec
has attr	89952.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net benchmark compares three approaches to accessing attribute values in HTML elements: `getAttribute`, `dataset`, and `hasAttribute`. The test cases are designed to measure the performance differences between these approaches on a specific webpage.

**Test Cases**

There are three individual test cases:

1. **`getAttribute`**: This test case uses the `getAttribute()` method to access the value of the `data-foo` attribute in an HTML element.
2. **`dataset`**: This test case uses the `dataset` property to access the value of the `data-foo` attribute in an HTML element.
3. **`hasAttribute`**: This test case uses the `hasAttribute()` method to check if an attribute is present on an HTML element, and then accesses the attribute value using the `getAttribute()` method.

**Options Compared**

The benchmark compares the following options:

* `getAttribute`: Accessing attribute values using the `getAttribute()` method.
* `dataset`: Using the `dataset` property to access attribute values.
* `hasAttribute`: Checking if an attribute is present on an element and then accessing its value using `getAttribute`.

**Pros and Cons of Each Approach**

* **`getAttribute`**:
	+ Pros: Widely supported, works in older browsers, easy to use.
	+ Cons: Can be slower than other approaches, may require more CPU cycles due to the explicit attribute lookup.
* **`dataset`**:
	+ Pros: Modern, efficient way to access attribute values, works well with HTML5 attributes. May be faster than `getAttribute`.
	+ Cons: Not supported in older browsers (IE8-), requires a compatible browser or polyfill.
* **`hasAttribute`**: 
	+ Pros: Checking if an attribute is present can be faster than using `getAttribute`, then accessing its value. However, it still uses the same CPU cycles to access the attribute value as `getAttribute`.
	+ Cons: May not be as efficient as `dataset`, requires two steps (checking and then accessing).

**Library Usage**

None of the test cases use any external libraries.

**Special JS Feature or Syntax**

* **`dataset`**: This property was introduced in HTML5 and allows for more convenient access to attribute values using dot notation (`element.dataset.foo`).
* **`hasAttribute()`**: This method was introduced in ECMAScript 2019 (ES2020) as a way to check if an attribute is present on an element without having to use `getAttribute()` explicitly.

**Other Alternatives**

If you need more performance or want to explore other approaches, consider the following:

* **`setAttribute()`**: Instead of accessing attribute values, you can set attributes using `setAttribute()`. This might be faster than accessing attribute values in some cases.
* **`dataset`-like properties**: Some libraries (e.g., jQuery) provide their own `dataset`-like properties for older browsers. However, these may not offer the same performance as native HTML5 `dataset` support.

Keep in mind that browser support and performance can vary greatly depending on the specific test case and implementation details. MeasureThat.net's benchmark results should be used to inform your decision-making process when choosing between these approaches.

Related benchmarks:

hasAttribute vs getAttribute vs dataset (version: 0)

Compare setAttribute to dataset

Comparing performance of: getAttribute vs dataset vs has attr

Created: one year ago by: Guest

Jump to the latest result

getAttribute

dataset

has attr

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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