Benchmark: Modern dataset vs old .getAttribute() vs jQuery .data() vs jQuery .attr() 2

HTML Preparation code:

<h3 id="data" data-test="text">kipr202 header</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
var element = document.getElementById("data"); var i = 10000; while (i--) { var value = element.dataset.test; }
getAttribute
var element = document.getElementById("data"); var i = 10000; while (i--) { var value = element.getAttribute("test"); }
jQuery .data()
var element = $("#data"); var i = 10000; while (i--) { var value = element.data("test"); }
jQuery .attr()
var element = $("#data"); var i = 10000; while (i--) { var value = element.attr("data-test"); }

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: 2 years ago)

User agent: Mozilla/5.0 (Android 11; Mobile; rv:103.0) Gecko/103.0 Firefox/103.0

Browser/OS: Firefox Mobile 103 on Android

View result in a separate tab

Test name	Executions per second
dataset	421.2 Ops/sec
getAttribute	65235.4 Ops/sec
jQuery .data()	197.3 Ops/sec
jQuery .attr()	133.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, the pros and cons of different approaches, and other considerations.

**Benchmark Overview**

The benchmark tests four different ways to access data from an HTML element:

1. Using the `dataset` property ( Modern JavaScript)
2. Using the `getAttribute()` method (Legacy JavaScript)
3. Using jQuery's `.data()` method
4. Using jQuery's `.attr()` method

**Options Compared**

The benchmark compares the performance of these four options on a mobile device running Firefox 103 on Android.

* **Modern JavaScript (dataset)**: This option uses the modern JavaScript `dataset` property to access data stored in an HTML element.
* **Legacy JavaScript (`getAttribute()`)**: This option uses the legacy JavaScript `getAttribute()` method to access data stored in an HTML element.
* **jQuery `.data()`**: This option uses jQuery's `.data()` method to store and retrieve data associated with an HTML element.
* **jQuery `.attr()`**: This option uses jQuery's `.attr()` method to access attributes of an HTML element.

**Pros and Cons**

Here are the pros and cons of each approach:

1. **Modern JavaScript (dataset)**:
	* Pros: Efficient, modern, and widely supported by browsers.
	* Cons: Not as widely supported in older browsers.
2. **Legacy JavaScript (`getAttribute()`)**
	* Pros: Wide support across older browsers, but may be slower due to its legacy nature.
	* Cons: Less efficient than modern approaches like `dataset`.
3. **jQuery `.data()`**:
	* Pros: Convenient and easy to use with jQuery, can also store arbitrary data.
	* Cons: May be overkill for simple cases, introduces an additional dependency (jQuery).
4. **jQuery `.attr()`**:
	* Pros: Easy to use, widely supported by browsers.
	* Cons: Only allows accessing attributes, not storing arbitrary data.

**Library and Syntax**

The benchmark uses jQuery as the library for two of the options (`$.data()` and `$.attr()`). The other option, `dataset`, is a modern JavaScript property that doesn't require any additional libraries or syntax.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* **Browser support**: If you need to support older browsers, legacy methods like `getAttribute()` might be necessary. However, modern approaches like `dataset` are generally more efficient and widely supported.
* **Data complexity**: If you're working with simple data, jQuery's `.attr()` or the `dataset` property might be sufficient. For more complex data, consider using a custom solution or a library that provides more advanced features.
* **Performance**: Modern approaches like `dataset` are generally faster than legacy methods.

**Alternatives**

If you don't want to use jQuery, here are some alternative solutions:

1. **Modern JavaScript alternatives**: Consider using other modern JavaScript properties like `getAttribute()` (which is similar to `dataset`) or even newer APIs like `Element.prototype.dataset` (which provides a more flexible way to access and modify dataset attributes).
2. **Custom implementation**: If you need specific functionality that isn't available in the above options, consider implementing your own solution using native JavaScript or another library.
3. **Other libraries**: Depending on your requirements, other libraries like Lodash or Underscore.js might provide more advanced features or alternatives to jQuery's `.data()` and `$.attr()`.

Related benchmarks:

Modern dataset vs old .getAttribute() vs jQuery .data() vs jQuery .attr() 2 (version: 0)

dont let it get optimized away

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

Created: 2 years ago by: Guest

Jump to the latest result

dataset

getAttribute

jQuery .data()

jQuery .attr()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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