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') }

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Windows

View result in a separate tab

Test name	Executions per second
dataset	4640.3 Ops/sec
setAttribute	8913.2 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.

Related benchmarks:

dataset vs setAttribute (version: 0)

Comparing performance of: dataset vs setAttribute

Created: 5 years ago by: Guest

Jump to the latest result

dataset

setAttribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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