Benchmark: Dataset vs getAttribute x2xqa2

Script Preparation code:

var els = [];
for (var i = 0; i < 10000; i++){
	var el = document.createElement("div");
	el.setAttribute("data-test", 1);
	els.push(el);
}

Tests:

dataset
var attrs = []; for (var i = 0; i < els.length; i++){ attrs.push(els[i].dataset.test); } if (attrs.length !== els.length){ throw "error" }
getAttribute
var attrs = []; for (var i = 0; i < els.length; i++){ attrs.push(els[i].getAttribute("data-test")); } if (attrs.length !== els.length){ throw "error" }
getAttribute2
var attrs = []; for (var i = 0; i < els.length; i++){ els[i].getAttribute && attrs.push(els[i].getAttribute("data-test")); } if (attrs.length !== els.length){ throw "error" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
dataset
getAttribute
getAttribute2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 12 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Windows

View result in a separate tab

Test name	Executions per second
dataset	489.4 Ops/sec
getAttribute	2073.7 Ops/sec
getAttribute2	2515.1 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 and explain what's being tested.

**Benchmark Overview**

The benchmark is testing three approaches to retrieve the value of an attribute from HTML elements in JavaScript:

1. **`dataset`**: Using the `dataset` property directly on the HTML element.
2. **`getAttribute`**: Using the `getAttribute` method with a string argument (in this case, `"data-test"`).
3. **`getAttribute2`**: Using a conditional expression (`els[i].getAttribute &&`) to call the `getAttribute` method only if it's truthy.

**Pros and Cons of each approach**

1. **`dataset`**:
	* Pros: Fast and efficient, as it directly accesses the attribute value.
	* Cons: Not supported in older browsers (e.g., IE 11) that don't have the `dataset` property. Additionally, some developers might not be familiar with this property.
2. **`getAttribute`**:
	* Pros: Widely supported across most browsers, including older ones like IE 11.
	* Cons: Can be slower than using the `dataset` property due to additional overhead (e.g., parsing the string argument).
3. **`getAttribute2`**:
	* Pros: Provides a fallback for older browsers that don't support the `dataset` property or prefer a more explicit approach.
	* Cons: Requires an extra conditional check, which can be slightly slower than direct access.

**Library and Special JS Features**

The benchmark uses none of any libraries. However, it does rely on JavaScript features specific to certain browsers:

* The `dataset` property is only supported in HTML5 compliant browsers (e.g., Chrome 1+, Firefox 3+). Older browsers like IE 11 don't support this feature.
* The `getAttribute` method has been part of the DOM API since early versions of IE, but its usage was not widely adopted until recent years.

**Other Alternatives**

If you're looking for alternative approaches to retrieve attribute values in JavaScript, consider:

1. **QuerySelectorAll**: Another way to access elements using CSS selectors.
2. **DOM traversal methods**: Using `querySelector`, `querySelectorAll`, or other DOM traversal methods can be faster than attribute-based approaches.

In conclusion, the benchmark is testing three common ways to retrieve attribute values from HTML elements in JavaScript: `dataset` (fast and efficient), `getAttribute` (widely supported but potentially slower), and `getAttribute2` (a fallback for older browsers).

Related benchmarks:

Dataset vs getAttribute x2xqa2 (version: 0)

Comparing performance of: dataset vs getAttribute vs getAttribute2

Created: 5 years ago by: Guest

Jump to the latest result

dataset

getAttribute

getAttribute2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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