Benchmark: Dataset vs getAttribute vs Property v2

HTML Preparation code:

<h3 id="data" data-test="text" data-id="some-id">Hello world!</h3>

Tests:

Dataset
const element = document.querySelector("#data"); const { test, id } = element.dataset; const testId = test + id;
getAttribute
const element = document.querySelector("#data"); const test = element.getAttribute('data-test'); const id = element.getAttribute('data-id'); const testId = test + id;

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: 10 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Dataset	3834502.5 Ops/sec
getAttribute	8077245.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 benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark measures the performance of two approaches to accessing data attributes in JavaScript:

1. `dataset` property
2. `getAttribute()` method

**What are we testing?**

We're comparing the execution speed of these two approaches on a web page with an HTML element that has two data attributes: `data-test` and `data-id`. The benchmark aims to determine which approach is faster.

**Options Compared**

The two options being compared are:

1. **`dataset` property**: This is a built-in property in JavaScript that allows accessing data attributes on an element. When you access a data attribute using the `dataset` property, it returns an object with the attribute name as the key and its value as the value.
2. **`getAttribute()` method**: This method retrieves the value of a specific attribute from an element.

**Pros and Cons**

* **`dataset` property**:
	+ Pros: Faster execution, more concise code, and easier to read.
	+ Cons: Not supported in older browsers (IE 10+, Edge 12+), and may not work with all attribute types.
* **`getAttribute()` method**:
	+ Pros: Supported by all modern browsers, including older ones. However, it can lead to more verbose code and may be slower due to the overhead of parsing attributes.
	+ Cons: Can be slower than using the `dataset` property.

**Library Usage**

There is no library being used in this benchmark. The `dataset` property is a built-in JavaScript feature, and the `getAttribute()` method is also a native browser API.

**Special JS Features or Syntax**

None of the test cases use any special JavaScript features or syntax beyond what's required to access data attributes.

**Other Considerations**

* **Browser Support**: As mentioned earlier, older browsers (IE 10+, Edge 12+) may not support the `dataset` property.
* **Performance Variability**: The benchmark results can vary depending on factors like page load time, network latency, and browser performance. These variables are not accounted for in this benchmark.

**Alternatives**

If you need to support older browsers or have specific requirements that aren't met by the `dataset` property, alternative approaches could include:

* Using the `getAttribute()` method consistently across all browsers.
* Implementing a custom solution using JavaScript's `requestAnimationFrame()` function or Web Workers to optimize performance.
* Using a library like Lodash or Underscore.js to provide a more consistent and performant way of accessing data attributes.

Keep in mind that these alternatives may have their own trade-offs and should be evaluated on a case-by-case basis.

Related benchmarks:

Dataset vs getAttribute vs Property v2 (version: 1)

Comparing performance of: Dataset vs getAttribute

Created: 5 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):