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

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
window.onload = function() { document.querySelector("h3#data").dataset.test; }
getAttribute
window.onload = function() { document.querySelector("h3#data").getAttribute("test"); }
jQuery .data()
$(document).ready(function() { $("h3#data").data("test"); });
jQuery .attr()
$(document).ready(function() { $("h3#data").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: 11 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Test name	Executions per second
dataset	441828.1 Ops/sec
getAttribute	471112.2 Ops/sec
jQuery .data()	8263.4 Ops/sec
jQuery .attr()	7875.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what is tested in this benchmark.

**Benchmark Overview**

The benchmark compares the performance of three ways to access and manipulate data attributes on an HTML element: `dataset`, `.getAttribute()`, and `.attr()` (both from jQuery).

**Options Compared**

1. **`dataset`**: This method uses the `dataset` property, which was introduced in modern browsers as a way to store and retrieve arbitrary key-value pairs as attributes.
2. **`.getAttribute()`**: This method uses the traditional attribute-based approach to access attribute values. It takes an element and a string as input, and returns the value of the specified attribute for that element.
3. **jQuery `.attr()`**: This method is similar to `.getAttribute()`, but it's part of jQuery's DOM manipulation API. It allows you to access attribute values using a more convenient syntax.

**Pros and Cons**

1. **`dataset`**:
	* Pros: More concise and efficient, especially when working with large datasets.
	* Cons: Not supported in older browsers, may require additional setup for attributes that don't start with a specific prefix (e.g., `data-`).
2. **`.getAttribute()`**:
	* Pros: Widely supported across browsers, no additional setup required.
	* Cons: Less readable and less efficient than the other two methods.
3. **jQuery `.attr()`**:
	* Pros: More convenient syntax, still widely supported across browsers (thanks to jQuery's polyfills).
	* Cons: Requires including jQuery in your project, which can add overhead.

**Library Considerations**

In this benchmark, jQuery is used as a library to simplify the usage of the `.attr()` method. The `data` attribute is used as a custom attribute, which is then accessed using `$(element).data('customAttribute')`. This approach allows for more readable code and avoids the need to use `getAttribute()` or `dataset`.

**Special JS Feature/Syntax**

There's no specific JavaScript feature or syntax being tested in this benchmark. However, it's worth noting that the `.dataset` property is a modern JavaScript feature introduced in HTML5.

**Alternative Approaches**

If you want to write your own attribute-based accessors, you can use the following approaches:

1. Use `getAttribute()` and `setAttribute()`: These methods are part of the DOM API and allow you to access and modify attribute values directly.
2. Use a library like Lodash or Underscore.js: These libraries provide utility functions for working with attributes, such as `_.getAttr()` or `_.attr()`.
3. Write your own custom accessor functions: You can create custom functions that wrap around the existing attribute-based methods to provide more convenient syntax and behavior.

Keep in mind that these alternative approaches may require additional setup and maintenance compared to using established libraries like jQuery.

Related benchmarks:

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

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

Created: 4 years ago by: Registered User

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