Benchmark: getAttribute vs dataset gregdaynes

HTML Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttribute
dataset
dataset x2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getAttribute	4695.5 Ops/sec
dataset	1762.6 Ops/sec
dataset x2	819.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The benchmark compares the performance of three approaches: setting attributes using `setAttribute` and accessing values in the `dataset` object.

**Test Cases**

There are three individual test cases:

1. **`getAttribute`**: This test case uses the `getAttribute` method to access the value of the `data-foo` attribute on an HTML element.
2. **`dataset`**: This test case accesses the value of the `foo` property in the `dataset` object of an HTML element using dot notation (e.g., `element.dataset.foo`).
3. **`dataset x2`**: This test case is similar to the previous one, but it also accesses the value of the `bar` property in the `dataset` object.

**Library and Syntax**

In this benchmark, the `dataset` object is used, which is a part of the HTML5 specification. The `dataset` object allows attributes to be accessed as properties of an element's DOM object. This provides a convenient way to access attribute values without using the `getAttribute` method.

The syntax used in these test cases is standard JavaScript and does not include any special features or syntax that would require additional explanation.

**Options Compared**

The three test cases compare the performance of:

* Using `setAttribute` to set attributes (not explicitly shown in the JSON, but assumed by MeasureThat.net)
* Accessing attribute values using `getAttribute`
* Accessing attribute values as properties of the `dataset` object

**Pros and Cons**

Here are some pros and cons of each approach:

* **`getAttribute`**: Pros:
	+ Widely supported across browsers
	+ Easy to use
	Cons:
	+ Can be slower due to additional overhead (e.g., parsing attribute names, searching for the value)
* **`dataset` object**:
	+ Pros:
		- Fast and efficient
		- Reduced code length compared to using `getAttribute`
	+ Cons:
		- Not all browsers support it (older versions of Chrome, Firefox)
		- May not be as intuitive for some developers
* **`dataset x2`**: This test case combines the benefits of both approaches. It accesses attribute values using dot notation, which can be faster than using `getAttribute`, but may still incur additional overhead.

**Other Alternatives**

If you were to implement a similar benchmark, you could consider adding other alternatives, such as:

* Using a library like jQuery to simplify DOM manipulation and access attribute values
* Implementing custom getters and setters for the `dataset` object
* Using other ways to access attribute values, such as using CSS selectors or regular expressions

However, these alternatives would likely require additional code and might not be as relevant or performant as the built-in `dataset` object in modern browsers.

Related benchmarks:

getAttribute vs dataset gregdaynes (version: 0)

Compare setAttribute to dataset

Comparing performance of: getAttribute vs dataset vs dataset x2

Created: one year ago by: Guest

Jump to the latest result

getAttribute

dataset

dataset x2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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