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');

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

Test name	Executions per second
dataset	2389658.0 Ops/sec
getAttribute	3669518.0 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.

Related benchmarks:

dataset vs getAttribute speed (version: 0)

Comparing performance of: dataset vs getAttribute

Created: 4 years ago by: Registered User

Jump to the latest result

dataset

getAttribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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