Benchmark: getAttribute vs dataset gregdaynes destructure multiple getAttribute

HTML Preparation code:

<div id="foo" data-foo="foo_id" data-bar="bar_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; }
dataset x2
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.dataset.foo; var bar = element.dataset.bar; }
dataset destructure
var element = document.getElementById("foo"); var i = 10000; while (i--) { var { foo, bar } = element.dataset; }
getAttribute x2
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.getAttribute("data-foo"); var bar = element.getAttribute("data-bar"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttribute
dataset
dataset x2
dataset destructure
getAttribute x2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

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

Browser/OS: Firefox 140 on Windows

View result in a separate tab

Test name	Executions per second
getAttribute	173267.0 Ops/sec
dataset	1419.1 Ops/sec
dataset x2	674.5 Ops/sec
dataset destructure	754.6 Ops/sec
getAttribute x2	166200.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

The test case compares four approaches to accessing attribute values from an HTML element:

1. `getAttribute`
2. `dataset` (a feature introduced in HTML5 that allows accessing attributes as properties of the element)
3. `dataset` with destructuring assignment (`{ foo, bar } = element.dataset;`)
4. `getAttribute` with multiple calls (x2)

**Options compared**

The test case compares two main approaches:

* **Using `getAttribute`**: This is a traditional way to access attribute values from an HTML element.
* **Using `dataset`**: This is a more modern approach that allows accessing attributes as properties of the element, making it easier to work with.

For each approach, there are variations:

* Using `getAttribute` multiple times (x2)
* Using `dataset` with destructuring assignment
* Using `dataset` without destructuring assignment

**Pros and Cons**

1. **Using `getAttribute`**:
	* Pros: widely supported, easy to implement.
	* Cons: can be slower than using `dataset`, as it involves a function call and parsing the attribute name.
2. **Using `dataset`**:
	* Pros: faster, more convenient for accessing multiple attributes.
	* Cons: not all browsers support this feature, and some may have performance issues with large datasets.

The use of `getAttribute` with destructuring assignment (`{ foo, bar } = element.dataset;`) is a relatively new syntax introduced in ECMAScript 2015 (ES6). It allows accessing multiple attributes at once using a single statement, which can be faster than calling `getAttribute` multiple times.

**Library and its purpose**

In this benchmark, the `dataset` feature is being tested. The `dataset` property is a standardized way to access attribute values as properties of an element in HTML5.

**Special JS features or syntax**

The test case uses ES6 destructuring assignment (`{ foo, bar } = element.dataset;`) which is a relatively new syntax introduced in ECMAScript 2015 (ES6). This syntax allows accessing multiple attributes at once using a single statement.

**Other alternatives**

If `dataset` is not supported by the browser, other approaches can be used:

* Using `getAttribute` with multiple calls
* Using JavaScript object notation to access attribute values (e.g., `element.getAttribute('data-foo')`)
* Using a library or framework that provides a similar feature

Keep in mind that using these alternatives may have different performance characteristics and are not as convenient as using the `dataset` feature.

In summary, this benchmark compares four approaches to accessing attribute values from an HTML element: using `getAttribute`, using `dataset`, using `dataset` with destructuring assignment, and using `getAttribute` with multiple calls. The test case highlights the pros and cons of each approach, including performance differences and browser support.

Related benchmarks:

getAttribute vs dataset gregdaynes destructure multiple getAttribute (version: 0)

Compare setAttribute to dataset

Comparing performance of: getAttribute vs dataset vs dataset x2 vs dataset destructure vs getAttribute x2

Created: one year ago by: Guest

Jump to the latest result

getAttribute

dataset

dataset x2

dataset destructure

getAttribute x2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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