Benchmark: dataset vs setAttribute

HTML Preparation code:


<div id='set' data-open="0"></div>

Tests:

dataset
const elem = document.getElementById("set"); var i = 1000; while (i--) { elem.dataset.open = "1"; }
setAttribute
const elem = document.getElementById("set"); var i = 1000; while (i--) { elem.setAttribute('data-open', '1') }

Historical Performance Data aggregated from 86 community runs

Desktop Results:

Chrome 64 runs

setAttribute

5K/s

dataset

3K/s

Fastest: setAttribute (1.8x faster)

View exact numbers

✓ setAttribute: 5,426 ops/sec
• dataset: 2,977 ops/sec

Firefox 22 runs

setAttribute

15K/s

dataset

8K/s

Fastest: setAttribute (1.8x faster)

View exact numbers

✓ setAttribute: 14,905 ops/sec
• dataset: 8,143 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
dataset
setAttribute

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

setAttribute

7K/s

dataset

5K/s

View exact numbers

Test name	Executions per second
✓ setAttribute	7,101 Ops/sec
dataset	4,642 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested, compared, and the pros and cons of different approaches.

**Benchmark Definition**

The benchmark definition is a JSON object that provides metadata about the test case. In this case, it specifies:

* `Name`: The name of the benchmark ("dataset vs setAttribute").
* `Description`: An empty string, indicating no description is provided.
* `Script Preparation Code` and `Html Preparation Code`: These are blank strings, suggesting that the script and HTML code for the test case should be provided separately.

**Individual Test Cases**

There are two individual test cases:

1. **"dataset"`: This test case uses the `dataset` property to set a value.
	* The benchmark definition is a JavaScript string that creates an element, sets a variable, and then loops 1000 times, setting the `data-open` attribute of the element using the `dataset` property.
2. **"setAttribute"`: This test case uses the `setAttribute()` method to set a value.
	* The benchmark definition is a JavaScript string that creates an element, sets a variable, and then loops 1000 times, setting the `data-open` attribute of the element using the `setAttribute()` method.

**Comparison**

The two test cases compare the performance of:

1. Using the `dataset` property to set a value.
2. Using the `setAttribute()` method to set a value.

**Pros and Cons:**

* **`dataset` property**: Pros:
	+ More modern and efficient way of accessing and modifying attribute values in HTML elements.
	+ Can be used for both getting and setting values.
	+ Avoids the need for a separate `getAttribute()` or `setAttribute()` call.
Cons:
	+ May not be supported in older browsers (pre-IE 9).
* **`setAttribute()` method**: Pros:
	+ Wide browser support, including older versions of IE.
	+ Can be used for both getting and setting values.
Cons:
	+ Less efficient than using the `dataset` property.
	+ Requires an extra function call.

**Library:**

There is no library explicitly mentioned in the provided data. However, it's worth noting that some JavaScript libraries (e.g., jQuery) provide their own utility functions for working with HTML elements and attribute values.

**Special JS Features or Syntax:**

None are explicitly mentioned in the provided data.

**Other Alternatives:**

If you want to test other approaches for setting attribute values, you could consider:

* Using the `domTokenList` API (introduced in Chrome 97) to set a list of attributes on an element.
* Using a library like jQuery or Lodash to simplify attribute manipulation.

Keep in mind that these alternatives might not be as efficient or widely supported as using the `dataset` property or the `setAttribute()` method.

dataset vs setAttribute (version: 0) Benchmark.js

Comparing performance of: `dataset vs setAttribute`

Created: 5 years ago by: Guest

Go to the latest result

dataset

setAttribute

Historical Performance Data aggregated from 86 community runs

Desktop Results:

Chrome 64 runs

Firefox 22 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

dataset vs setAttribute (version: 0) Benchmark.js

Comparing performance of: dataset vs setAttribute

Created: 5 years ago by: Guest

Go to the latest result

dataset

setAttribute

Historical Performance Data aggregated from 86 community runs

Desktop Results:

Chrome 64 runs

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