Benchmark: dataset vs getAttribute() vs jQuery.data() vs jQuery.attr()

HTML Preparation code:

<h3 id="data" data-test="text">Some test content</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

Tests:

dataset
window.onload = function() { var test = document.querySelector("h3#data").dataset.test; document.querySelector("h3#data").dataset.test = test+"1"; }
getAttribute
window.onload = function() { var test = document.querySelector("h3#data").getAttribute("test"); document.querySelector("h3#data").setAttribute("test", test+"1"); }
jQuery .data()
$(document).ready(function() { var $h3 = $("h3#data"); var test = $h3.data("test"); $h3.data("test", test+"1"); });
jQuery .attr()
$(document).ready(function() { var $h3 = $("h3#data"); var test = $h3.attr("data-test"); $h3.attr("data-test", test+"1"); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
dataset
getAttribute
jQuery .data()
jQuery .attr()

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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

dataset

5.1M/s

getAttribute

5.1M/s

jQuery .data()

106K/s

jQuery .attr()

71K/s

View exact numbers

Test name	Executions per second
✓ dataset	5,103,438 Ops/sec
getAttribute	5,060,324 Ops/sec
jQuery .data()	105,799 Ops/sec
jQuery .attr()	70,706 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net benchmark compares the performance of three approaches to update and retrieve data attribute values in HTML elements: `dataset`, `getAttribute()`, `jQuery.data()`, and `jQuery.attr()`.

**Test Cases**

Each test case is designed to measure the execution time of a specific approach:

1. **`dataset`**: Retrieves and updates the value of a dataset attribute using the dot notation (`test.dataset.test`) and assignment (`test.dataset.test = test + "1"`).
2. **`getAttribute()`**: Uses the `getAttribute()` method to retrieve and update the value of an attribute with the specified name (`"test"`).
3. **`jQuery.data()`**: Utilizes jQuery's `.data()` method to store and retrieve data associated with an element, using a key-value pair (`"test"`, `"value"`).
4. **`jQuery.attr()`**: Employs jQuery's `.attr()` method to access and modify attribute values.

**Comparison Options**

The benchmark compares the performance of each approach across different browsers (Chrome 127) on desktop devices running Windows operating systems.

**Pros and Cons**

1. **`dataset`**:
	* Pros: Simple, native JavaScript implementation; fast execution times.
	* Cons: May not work in older browsers or those with broken DOM implementations.
2. **`getAttribute()`**:
	* Pros: Widely supported across modern browsers; can be used for attribute manipulation.
	* Cons: Slower execution times compared to `dataset`.
3. **`jQuery.data()`**:
	* Pros: Convenient, feature-rich API; well-supported in jQuery version 1.4 and later.
	* Cons: Requires jQuery library inclusion; slower execution times compared to `dataset`.
4. **`jQuery.attr()`**:
	* Pros: Fast execution times; convenient API for attribute manipulation.
	* Cons: Requires jQuery library inclusion.

**Library and Syntax**

The benchmark uses the jQuery library (version 3.5.1) to utilize `.data()` and `.attr()` methods.

There are no special JavaScript features or syntax used in this benchmark that would require advanced knowledge of JavaScript to understand.

**Other Alternatives**

If you need an alternative approach, consider:

* **`DOMTokenList`**: A modern API for working with HTML attributes. It's faster than `getAttribute()` and `attr()`, but might not be supported in older browsers.
* **`MutationObserver`**: An API for observing changes to the DOM. It can be used to detect attribute changes, but its performance characteristics depend on browser support.

Keep in mind that these alternatives may require additional setup or library inclusion.

dataset vs getAttribute() vs jQuery.data() vs jQuery.attr() (version: 0) Benchmark.js

Comparing performance of: `dataset vs getAttribute vs jQuery .data() vs jQuery .attr()`

Created: 3 years ago by: Guest

Go to the latest result

dataset

getAttribute

jQuery .data()

jQuery .attr()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

dataset vs getAttribute() vs jQuery.data() vs jQuery.attr() (version: 0) Benchmark.js

Comparing performance of: dataset vs getAttribute vs jQuery .data() vs jQuery .attr()

Created: 3 years ago by: Guest

Go to the latest result

dataset

getAttribute

jQuery .data()

jQuery .attr()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `dataset vs getAttribute vs jQuery .data() vs jQuery .attr()`