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

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:

window.onload = function() {
  document.querySelector("h3#data").test = 'text';
}

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"); });
variable
window.onload = function() { document.querySelector("h3#data").test; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

Browser/OS: Chrome 90 on Linux

View result in a separate tab

Test name	Executions per second
dataset	1154499.8 Ops/sec
getAttribute	1183446.4 Ops/sec
jQuery .data()	34103.3 Ops/sec
jQuery .attr()	34458.8 Ops/sec
variable	1172753.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of different approaches to access and manipulate attribute values in HTML elements. Specifically, it's comparing:

1. `dataset.test` (using the `dataset` property)
2. `getAttribute("test")`
3. jQuery `.data()` with `$(element).data('test')`
4. jQuery `.attr()` with `$(element).attr('data-test')`
5. Accessing a variable directly (`test`) assigned to an HTML element.

**Options being compared:**

1. **`dataset.test`**: This method uses the `dataset` property, which is a standardized way to access attribute values in HTML elements.
	* Pros: Simple, fast, and easy to use.
	* Cons: Not supported in older browsers (prior to IE 10).
2. **`getAttribute("test")`**: This method uses the `getAttribute()` function, which is a part of the DOM API.
	* Pros: Works in all browsers, including older ones.
	* Cons: Can be slower than using `dataset`.
3. **jQuery `.data()`**: This method uses jQuery's `.data()` method, which stores arbitrary data on an element.
	* Pros: Allows for more complex data storage and retrieval.
	* Cons: Requires jQuery library and can add overhead.
4. **jQuery `.attr()`**: This method uses jQuery's `.attr()` method, which sets or returns the value of an attribute.
	* Pros: Works with attributes other than `data-` prefixed ones.
	* Cons: Not optimized for accessing attribute values directly.
5. **Direct access (`test`)**: This method accesses a variable directly assigned to an HTML element.
	* Pros: Simple and fast, but requires extra setup.

**Library used:**

In the benchmark, jQuery is used for the `.data()` and `.attr()` methods.

**Special JS feature or syntax:**

None mentioned. However, it's worth noting that the `dataset` property was introduced in HTML5, which may affect browser support.

**Other alternatives:**

If you're interested in exploring alternative approaches, here are a few options:

1. **Property access**: Instead of using `getAttribute()` or `.data()`, you could use simple property access (`element.test`) to access attribute values.
2. **DOM methods**: Explore other DOM methods like `element.dataset` (similar to `dataset`) or `element.getAttribute('test')`.
3. **Custom solutions**: Consider implementing your own custom solution using JavaScript, avoiding jQuery altogether.

Keep in mind that each approach has its trade-offs and may be better suited for specific use cases.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

dataset

getAttribute

jQuery .data()

jQuery .attr()

variable

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