Benchmark: getAttribute vs dataset 2023

HTML Preparation code:

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

Tests:

setAttribute
var element = document.getElementById("foo"); var i = 10000; var current = 0; while (i--) { element.setAttribute("data-foo", `foo_${i}`); current = element.getAttribute("data-foo"); }
dataset
var element = document.getElementById("foo"); var i = 10000; var current = 0; while (i--) { element.setAttribute("data-foo", `foo_${i}`); current = element.dataset.foo; }

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: 4 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
setAttribute	649.6 Ops/sec
dataset	495.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in the provided benchmark.

**Benchmark Definition**

The benchmark definition represents two test cases: `setAttribute` and `dataset`. The goal is to compare the performance of setting an attribute (`data-foo`) on an HTML element using the `setAttribute()` method versus accessing a dataset property (`data-foo`) on the same element.

**Options being compared**

Two approaches are being compared:

1. **Setting an attribute using `setAttribute()`**: This method involves calling the `setAttribute()` method on the `element` object, passing the attribute name and value as arguments.
2. **Accessing a dataset property**: This approach uses the `dataset` property of the `element` object to access the `data-foo` attribute.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Setting an attribute using `setAttribute()`**:
	* Pros: More explicit and controlled way to set attributes, can be used in situations where the attribute value needs to be computed dynamically.
	* Cons: Can be slower due to the method call overhead, may incur additional memory allocations if the attribute is not already present on the element.
2. **Accessing a dataset property**:
	* Pros: Typically faster and more lightweight than setting an attribute using `setAttribute()`, as it avoids method call overhead and only accesses an existing property.
	* Cons: May require extra JavaScript code to access the dataset, can lead to slower performance if not optimized.

**Library usage**

Neither of the test cases uses a specific library. The `dataset` property is a built-in feature of HTML elements in modern browsers.

**Special JS features or syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Other alternatives**

If you were to rewrite this benchmark, other approaches could be considered:

1. **Using `data-foo` directly**: Instead of using the `dataset` property, you could access the attribute value directly by concatenating the element ID with the attribute name: `element.getAttribute('data-foo')`. This would eliminate the need for a library.
2. **Using `setAttribute()` with an object**: You could pass an object as the second argument to `setAttribute()`, containing the attribute name and value as properties. For example: `element.setAttribute('data-foo', { foo: 'bar' })`. This approach can be useful when working with complex attribute values.
3. **Using a library like Lodash**: If you needed to access attributes dynamically, you could use a utility library like Lodash, which provides methods for accessing and manipulating properties on objects.

Keep in mind that these alternatives may change the performance characteristics of the benchmark, so it's essential to test them thoroughly before selecting an approach.

Related benchmarks:

getAttribute vs dataset 2023 (version: 0)

Compare getAttribute to dataset

Comparing performance of: setAttribute vs dataset

Created: 2 years ago by: Guest

Jump to the latest result

setAttribute

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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