Benchmark: setAttribute vs dataset

HTML Preparation code:

<div id="foo"></div>

Tests:

setAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.setAttribute("data-foo", `foo_${i}`); }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.dataset.foo = `foo_${i}`; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setAttribute
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:120.0) Gecko/20100101 Firefox/120.0

Browser/OS: Firefox 120 on Ubuntu

View result in a separate tab

Test name	Executions per second
setAttribute	195.8 Ops/sec
dataset	164.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark and the options being compared.

**Benchmark Overview**

The goal of this benchmark is to compare two ways of setting attribute values on an HTML element: using the `setAttribute` method or using the `dataset` property. The test case uses a simple scenario where we have 10,000 iterations to set attributes with increasing numbers (`foo_1`, `foo_2`, ..., `foo_10000`) on an HTML element with the id `foo`.

**Options Being Compared**

There are two options being compared:

1. **`setAttribute`**: This method sets a single attribute value directly on the element.
```javascript
element.setAttribute("data-foo", `foo_${i}`);
```
2. **`dataset` property**: This is an object-like property that allows you to store arbitrary key-value pairs on an HTML element. You can access and set these values using dot notation or bracket notation, similar to how you would access properties on a JavaScript object.
```javascript
element.dataset.foo = `foo_${i}`;
```
**Pros and Cons**

* **`setAttribute`**:
	+ Pros: Simple, straightforward, and widely supported.
	+ Cons: Can be slower due to the overhead of creating and manipulating attribute names.
* **`dataset` property**:
	+ Pros: More efficient, as it avoids the overhead of attribute name creation and manipulation. Also, it provides a convenient way to store and access key-value pairs.
	+ Cons: May not be supported in older browsers or versions (although most modern browsers support it).

**Library**

The `dataset` property is part of the HTML5 specification, which introduces the `data-*` attributes for storing arbitrary key-value pairs on elements. The purpose of the `dataset` property is to provide a way to access and manipulate these values in a more convenient and flexible manner.

**Special JS Feature or Syntax**

None mentioned here, as both options use standard JavaScript syntax.

**Other Alternatives**

If you're looking for alternatives to the `dataset` property, some other options include:

* Using a library like jQuery's `.data()` method
* Implementing your own custom data storage solution (e.g., using a Map or an Object)
* Using attributes with specific prefixes (e.g., `x-data-foo`) to create a pseudo-dataset

However, it's worth noting that the `dataset` property is a widely supported and efficient way to store and access key-value pairs on HTML elements, making it a good choice for most use cases.

Related benchmarks:

setAttribute vs dataset (version: 0)

Compare setAttribute to dataset

Comparing performance of: setAttribute vs dataset

Created: 4 years ago by: Guest

Jump to the latest result

setAttribute

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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