Benchmark: getAttribute vs dataset 1002

HTML Preparation code:

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

Tests:

getAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.attributes["data-foo"]?.value; }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.dataset.foo; }

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
getAttribute	1222.7 Ops/sec
dataset	1250.6 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 on the provided JSON benchmark.

The benchmark compares two approaches to retrieve data from an HTML element: `setAttribute` and `dataset`. Specifically, it measures the performance of these two approaches when used with the `data-foo` attribute in a `div` element.

**Options compared:**

1. **`setAttribute`**: This approach involves setting a custom attribute on the HTML element using `element.setAttribute('data-foo', 'foo_id')`, and then retrieving its value using `element.attributes['data-foo']?.value`.
2. **`dataset`**: This approach uses the `dataset` property of the element, which was introduced in HTML5, to retrieve the value associated with a given key (`'data-foo'`) without setting any custom attributes.

**Pros and Cons:**

* **`setAttribute`**:
	+ Pros: Simple and well-supported in older browsers.
	+ Cons: Requires setting an attribute, which can be slower and more verbose than using `dataset`.
* **`dataset`**:
	+ Pros: More efficient and concise, as it avoids setting an attribute.
	+ Cons: May not work in older browsers that don't support HTML5.

**Library used:**

None explicitly mentioned. However, the benchmark assumes that the JavaScript environment has access to the `document.getElementById()` method, which is a part of the DOM (Document Object Model) API.

**Special JS feature or syntax:**

No specific features or syntax are highlighted in this benchmark. The focus is on comparing two approaches to data retrieval, without introducing any advanced JavaScript concepts.

**Other alternatives:**

There are other ways to access attributes and data associated with elements, such as:

1. Using `getAttribute()` and setting a custom attribute using `setAttribute()`.
2. Using `dataset` in combination with a custom attribute.
3. Using `getElementsByName()` (not shown in this benchmark) or `querySelectorAll()` to retrieve elements by name or selector.

These alternatives may offer different performance characteristics, depending on the specific use case and browser support.

I hope this explanation helps!

Related benchmarks:

getAttribute vs dataset 1002 (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):