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"; }

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 year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 YaBrowser/23.1.1.1138 Yowser/2.5 Safari/537.36

Browser/OS: Yandex Browser 23 on Windows

View result in a separate tab

Test name	Executions per second
setAttribute	4282.1 Ops/sec
dataset	2339.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

setAttribute vs dataset.attrName (version: 0)

Comparing performance of: setAttribute vs dataset

Created: 3 years ago by: Guest

Jump to the latest result

setAttribute

dataset

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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