Benchmark: setAttribute vs dataset.attrName

HTML Preparation code:

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

Tests:

setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("data-state", "active"); }
dataset
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.dataset.state = "active"; }

Historical Performance Data aggregated from 25 community runs

Desktop Results:

Chrome 18 runs

setAttribute

11K/s

dataset

5K/s

Fastest: setAttribute (2.4x faster)

View exact numbers

✓ setAttribute: 11,490 ops/sec
• dataset: 4,833 ops/sec

Firefox 7 runs

setAttribute

7K/s

dataset

5K/s

Fastest: setAttribute (1.5x faster)

View exact numbers

✓ setAttribute: 7,195 ops/sec
• dataset: 4,922 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
setAttribute
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 153 on Windows

View result in a separate tab

setAttribute

11K/s

dataset

6K/s

View exact numbers

Test name	Executions per second
✓ setAttribute	10,777 Ops/sec
dataset	5,737 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance difference between two approaches to set an attribute on an HTML element: using `setAttribute` and using the `dataset` property.

**Options Compared**

The benchmark compares two options:

1. **`setAttribute`**: This approach uses the `setAttribute` method to set a custom attribute on the `element` object. The attribute name is specified as "data-state" and its value is set to "active".
2. **`dataset`**: This approach uses the `dataset` property to access a storage mechanism for key-value pairs. In this case, it sets the "state" key in the `element.dataset` object to the value "active".

**Pros and Cons of Each Approach**

* **`setAttribute`**:
	+ Pros:
		- Widely supported across browsers.
		- Can be used with any attribute name, not just custom ones like `dataset`.
	+ Cons:
		- May lead to slower performance due to the need for DOM manipulation.
		- Can result in attribute proliferation if not managed carefully.
* **`dataset`**:
	+ Pros:
		- Provides a centralized storage mechanism for key-value pairs.
		- Can improve performance by reducing the number of attributes set on an element.
	+ Cons:
		- Not supported in older browsers (prior to Chrome 32).
		- May require more JavaScript code to manage.

**Other Considerations**

* **Library Usage**: The benchmark uses the `Yowser` library, which is a wrapper around Chromium's engine. This library ensures that the test results are consistent across various browsers.
* **Special JS Features/Syntax**: There are no special JavaScript features or syntax used in this benchmark, as both approaches only rely on standard JavaScript constructs.

**Alternatives**

If you're looking for alternatives to this specific benchmark, consider these options:

1. Measure the performance of other attribute setting methods, such as using `data-` attributes or custom DOM properties.
2. Compare the performance of different storage mechanisms for key-value pairs, like `localStorage`, `sessionStorage`, or custom solutions.
3. Benchmark the performance of element updates, manipulations, or other DOM-related operations.

**Benchmark Preparation Code**

The provided HTML preparation code is simple and only includes an empty `div` element with a unique ID (`foo`). The script preparation code is also empty, indicating that no specific setup or initialization is required for this benchmark.

setAttribute vs dataset.attrName (version: 0) Benchmark.js

Comparing performance of: `setAttribute vs dataset`

Created: 5 years ago by: Guest

Go to the latest result

setAttribute

dataset

Historical Performance Data aggregated from 25 community runs

Desktop Results:

Chrome 18 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

setAttribute vs dataset.attrName (version: 0) Benchmark.js

Comparing performance of: setAttribute vs dataset

Created: 5 years ago by: Guest

Go to the latest result

setAttribute

dataset

Historical Performance Data aggregated from 25 community runs

Desktop Results:

Chrome 18 runs

Firefox 7 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: `setAttribute vs dataset`