Benchmark: dataset vs getAttribute speed

HTML Preparation code:

<div class="data" data-test="lorem">test dataset</h3>

Tests:

dataset
document.querySelector('.data').dataset.test;
getAttribute
document.querySelector('.data').getAttribute('test');

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

getAttribute

3.2M/s

dataset

2.3M/s

Fastest: getAttribute (1.4x faster)

View exact numbers

✓ getAttribute: 3,182,337 ops/sec
• dataset: 2,257,766 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
dataset
getAttribute

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 109 on Windows

View result in a separate tab

getAttribute

3.7M/s

dataset

2.4M/s

View exact numbers

Test name	Executions per second
✓ getAttribute	3,669,518 Ops/sec
dataset	2,389,658 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 JSON benchmark definition and test cases to understand what's being tested.

**Benchmark Definition**

The benchmark is defined as a simple script that creates an HTML element with a dataset attribute and then queries it using two different methods: `dataset` and `getAttribute`. The HTML structure is:

```html
<div class="data" data-test="lorem">test dataset</h3>
```

**Test Cases**

There are two test cases:

1. **`dataset`**: This test case uses the `dataset` property of the element to access its attributes.
2. **`getAttribute`**: This test case uses the `getAttribute()` method of the element to retrieve the value of the attribute with key `'test'`.

**What is being tested?**

The benchmark is testing the speed difference between two approaches:

1. Using the `dataset` property to access an attribute (e.g., `document.querySelector('.data').dataset.test;`)
2. Using the `getAttribute()` method to retrieve an attribute value (e.g., `document.querySelector('.data').getAttribute('test');`)

**Pros and Cons**

* **Using `dataset`**: Pros:
	+ More convenient and concise syntax.
	+ Often faster than using `getAttribute()`.
	Cons:
	+ Less explicit, which can lead to confusion or errors if not used carefully.
* **Using `getAttribute()`**: Pros:
	+ More explicit and straightforward syntax.
	+ Can be useful in cases where the attribute is not defined on the element.
Cons:
	+ Generally slower than using `dataset`.

**Library:**

There is no specific library being used in this benchmark. The tests are using built-in JavaScript APIs.

**Special JS feature or syntax:**

The benchmark uses a relatively modern JavaScript feature: the `dataset` property, which was introduced in ECMAScript 2017 (ES7). This property allows elements to store and retrieve arbitrary key-value pairs as attributes.

Other alternatives:

If you want to compare other approaches, here are some additional options:

* Using `getAttribute()` with a default value:
```html
document.querySelector('.data').getAttribute('test', 'default_value');
```
* Using a function to dynamically retrieve the attribute value:
```javascript
function getAttribute(element, key) {
  return element.getAttribute(key);
}
// ...
document.querySelector('.data').getAttribute('test', getAttribute);
```

Keep in mind that these alternatives may introduce additional overhead or complexity, so it's essential to consider your specific use case and performance requirements before using them.

dataset vs getAttribute speed (version: 0)

Comparing performance of: `dataset vs getAttribute`

Created: 4 years ago by: Registered User

Go to the latest result

dataset

getAttribute

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 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):

dataset vs getAttribute speed (version: 0)

Comparing performance of: dataset vs getAttribute

Created: 4 years ago by: Registered User

Go to the latest result

dataset

getAttribute

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 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: `dataset vs getAttribute`