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

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 11 runs

has attr

5K/s

getAttribute

4K/s

dataset

2K/s

Fastest: has attr (2.7x faster)

View exact numbers

✓ has attr: 4,706 ops/sec
• getAttribute: 4,326 ops/sec
• dataset: 1,741 ops/sec

Firefox 6 runs

has attr

111K/s

getAttribute

111K/s

dataset

1K/s

Fastest: has attr (103.3x faster)

View exact numbers

✓ has attr: 110,731 ops/sec
• getAttribute: 110,600 ops/sec
• dataset: 1,072 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
getAttribute
dataset
has attr

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/149.0.0.0 Safari/537.36

Browser/OS: Chrome 149 on Windows

View result in a separate tab

getAttribute

2K/s

has attr

2K/s

dataset

902/s

View exact numbers

Test name	Executions per second
✓ getAttribute	1,729 Ops/sec
has attr	1,618 Ops/sec
dataset	902 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.

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

Go to the latest result

getAttribute

dataset

has attr

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 11 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

getAttribute

dataset

has attr

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 11 runs

Firefox 6 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: `getAttribute vs dataset vs has attr`