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

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>

Script Preparation code:

var h3 = document.querySelector("h3#data");
var $h3 = $(h3);

Tests:

dataset
window.onload = function() { h3.dataset.test; }
getAttribute
window.onload = function() { h3.getAttribute("test"); }
jQuery .data()
$(document).ready(function() { $h3.data("test"); });
jQuery .attr()
$(document).ready(function() { $h3.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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 OPR/109.0.0.0

Browser/OS: Opera 109 on Windows

View result in a separate tab

Test name	Executions per second
dataset	1287639.1 Ops/sec
getAttribute	1373779.5 Ops/sec
jQuery .data()	42600.0 Ops/sec
jQuery .attr()	34148.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial for optimizing and improving code efficiency.

The provided benchmark tests different ways of accessing dataset values in HTML elements, specifically comparing the speed of:

1. **Modern `.dataset` property**: The most modern way to access dataset attributes in HTML5 (introduced in 2014).
2. **`.getAttribute()` method**: A legacy approach used before the introduction of `dataset` property.
3. **jQuery's `.data()` method**: A popular JavaScript library for manipulating DOM elements, introduced in 2006.
4. **jQuery's `.attr()` method**: Another jQuery utility function for accessing attribute values.

**Options comparison and pros/cons:**

1. **Modern `.dataset` property**:
	* Pros: Fast, efficient, and modern way to access dataset attributes.
	* Cons: Requires HTML5 support (most browsers support it, but not older ones).
2. **`.getAttribute()` method**:
	* Pros: Works in older browsers that don't support `dataset`, relatively fast.
	* Cons: Less efficient than `.dataset` property, as it requires parsing the attribute value as a string.
3. **jQuery's `.data()` method**:
	* Pros: Convenient, easy to use, and works in most browsers with jQuery support.
	* Cons: Adds unnecessary overhead due to jQuery's complexity, relatively slower than `dataset`.
4. **jQuery's `.attr()` method**:
	* Pros: Fast and efficient, as it uses the underlying DOM methods under the hood.
	* Cons: Requires jQuery library inclusion, which might be a performance hit.

In terms of performance, the modern `.dataset` property is likely to be the fastest, followed by jQuery's `.attr()` method. The `.getAttribute()` method is slower due to its string parsing requirement, while jQuery's `.data()` method introduces additional overhead.

**Library usage:**

The benchmark uses jQuery (version 3.5.1) for its `.data()` and `.attr()` methods. The `dataset` property usage is native JavaScript.

**JavaScript features and syntax:**

None of the tested approaches use any specific or advanced JavaScript features that are not widely supported across modern browsers.

**Alternative approaches:**

If you want to explore alternative options, consider:

1. **Native properties**: Instead of using `.data()` or `.attr()`, you can access attribute values directly using native property names (e.g., `h3.dataset.test`).
2. **Vanilla JavaScript alternatives**: Explore other ways to achieve similar results without relying on jQuery, such as using the `JSON` object to store and retrieve data.
3. **Other libraries or frameworks**: Depending on your specific use case, you might want to explore alternative libraries like Lodash or Underscore.js for handling DOM manipulation.

Keep in mind that benchmarking JavaScript performance can be complex, and results may vary depending on the specific use case and browser version.

Related benchmarks:

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

Fork: Fix avoid timing the querying.

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

Created: 4 years ago by: Guest

Jump 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):