Benchmark: setAttribute vs dataset (v2)

HTML Preparation code:

<div id="foo" data-foo="foo_id"></div>

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttribute
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.1.2

View result in a separate tab

Test name	Executions per second
getAttribute	2844.1 Ops/sec
dataset	1370.6 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 world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark being tested is the difference in performance between using the `setAttribute` method versus the `dataset` property to set attribute values in a JavaScript test case. The benchmark aims to determine which approach is faster and more efficient.

**Options Being Compared**

Two options are compared:

1. **`setAttribute`**: This method involves setting an attribute on an HTML element using the `setAttribute()` function, followed by assigning a value to that attribute.
2. **`dataset` property**: This property allows you to store key-value pairs as attributes on an HTML element, making it easier to access and manipulate data.

**Pros and Cons of Each Approach**

### `setAttribute`

Pros:

* Widespread support across browsers and platforms
* Can be used with any attribute name

Cons:

* May require more overhead due to the additional function call
* Less intuitive than using the `dataset` property for setting attribute values

### `dataset` Property

Pros:

* More concise and expressive way of storing key-value pairs as attributes
* Faster performance compared to using `setAttribute`
* More intuitive than using `setAttribute` for setting attribute values

Cons:

* Limited support across older browsers and platforms (although it's been widely adopted)
* May not be suitable for all use cases where specific attribute names are required

**Library and Special JS Features Used**

In this benchmark, none of the special JS features or syntax are used. The code only relies on standard JavaScript features.

**Alternative Approaches**

There are alternative approaches to setting attribute values:

1. **`DOMStringManipulation` API**: This API provides a set of methods for manipulating strings and elements in the DOM, including setting attributes.
2. **`MutationObserver` API**: This API allows you to observe changes to an element's attributes, allowing for more control over when attribute changes occur.

**Other Considerations**

When evaluating performance benchmarks like this one, consider the following factors:

* **Browser support**: Ensure that the benchmark is run on a range of browsers and platforms to ensure accurate results.
* **Hardware configuration**: Use a consistent hardware setup to minimize variations in performance due to differences in CPU speed or other hardware components.
* **Test case variability**: Include multiple test cases with varying inputs and outputs to ensure the benchmark accurately reflects real-world usage patterns.

By considering these factors, you can gain a deeper understanding of how different approaches affect performance in JavaScript microbenchmarks.

Related benchmarks:

setAttribute vs dataset (v2) (version: 0)

Compare setAttribute to dataset

Comparing performance of: getAttribute vs dataset

Created: 2 years ago by: Guest

Jump to the latest result

getAttribute

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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