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

HTML Preparation code:

<h3 id="data" data-test="1234">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>

AخA
 
<h3 id="data" data-test="1234">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() { console.log(document.querySelector("h3#data").dataset.test); }
window.onload = function() {
console.log(document.querySelector("h3#data").dataset.test);
}
getAttribute
window.onload = function() { console.log(document.querySelector("h3#data").getAttribute("data-test")); }
window.onload = function() {
console.log(document.querySelector("h3#data").getAttribute("data-test"));
}
jQuery .data()
$(document).ready(function() { console.log($("h3#data").data("test")); });
$(document).ready(function() {
console.log($("h3#data").data("test"));
});
jQuery .attr()
$(document).ready(function() { console.log($("h3#data").attr("data-test")); });
$(document).ready(function() {
console.log($("h3#data").attr("data-test"));
});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
dataset	3401792.2 Ops/sec
getAttribute	3485524.0 Ops/sec
jQuery .data()	113595.2 Ops/sec
jQuery .attr()	118027.9 Ops/sec

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

Let's break down the provided benchmark and explain what's being tested.

Benchmark Overview

The benchmark compares the performance of four different approaches to access data attributes on an HTML element:

Modern JavaScript way: Using dataset property (introduced in ECMAScript 2017) to access the "test" attribute.
Old .getAttribute() method: Using the traditional getAttribute() method to retrieve the value of a specified attribute.
jQuery's .data() method: Using jQuery's .data() method to store and retrieve arbitrary data associated with an element.
jQuery's .attr() method: Using jQuery's .attr() method to retrieve the raw value of a specified attribute.

Comparison

The test cases are designed to measure the execution speed of each approach, which is typically measured in terms of the number of executions per second (ExecutionsPerSecond). The comparison is between:

dataset vs getAttribute(): This tests whether using the dataset property is faster or slower than using the traditional getAttribute() method.
jQuery .data() vs jQuery .attr(): This tests whether jQuery's .data() method is faster or slower than its .attr() method for retrieving attribute values.

Pros and Cons of Each Approach

Modern JavaScript way (dataset property):
- Pros: Modern, concise, and widely supported by modern browsers.
- Cons: May not be supported in older browsers, and performance may vary depending on the specific use case.
Old .getAttribute() method:
- Pros: Wide compatibility with older browsers and known behaviors.
- Cons: More verbose and less convenient to use compared to the dataset property.
jQuery's .data() method:
- Pros: Convenient for storing arbitrary data, easy to use, and widely supported by jQuery users.
- Cons: May incur performance overhead due to its additional complexity.
jQuery's .attr() method:
- Pros: Simple and straightforward for retrieving attribute values.
- Cons: Returns the raw value of the attribute, which may not be what you want (e.g., it includes HTML entities).

Library Usage

The benchmark uses jQuery, a popular JavaScript library, to demonstrate its .data() and .attr() methods.

Special JS Features or Syntax

There are no special JavaScript features or syntax used in this benchmark beyond the dataset property.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of four different approaches to access data attributes on an HTML element:

1. **Modern JavaScript way**: Using `dataset` property (introduced in ECMAScript 2017) to access the "test" attribute.
2. **Old `.getAttribute()` method**: Using the traditional `getAttribute()` method to retrieve the value of a specified attribute.
3. **jQuery's `.data()` method**: Using jQuery's `.data()` method to store and retrieve arbitrary data associated with an element.
4. **jQuery's `.attr()` method**: Using jQuery's `.attr()` method to retrieve the raw value of a specified attribute.

**Comparison**

* `dataset` vs `getAttribute()`: This tests whether using the `dataset` property is faster or slower than using the traditional `getAttribute()` method.
* `jQuery .data()` vs `jQuery .attr()`: This tests whether jQuery's `.data()` method is faster or slower than its `.attr()` method for retrieving attribute values.

**Pros and Cons of Each Approach**

1. **Modern JavaScript way (`dataset` property)**:
	* Pros: Modern, concise, and widely supported by modern browsers.
	* Cons: May not be supported in older browsers, and performance may vary depending on the specific use case.
2. **Old `.getAttribute()` method**:
	* Pros: Wide compatibility with older browsers and known behaviors.
	* Cons: More verbose and less convenient to use compared to the `dataset` property.
3. **jQuery's `.data()` method**:
	* Pros: Convenient for storing arbitrary data, easy to use, and widely supported by jQuery users.
	* Cons: May incur performance overhead due to its additional complexity.
4. **jQuery's `.attr()` method**:
	* Pros: Simple and straightforward for retrieving attribute values.
	* Cons: Returns the raw value of the attribute, which may not be what you want (e.g., it includes HTML entities).

**Library Usage**

The benchmark uses jQuery, a popular JavaScript library, to demonstrate its `.data()` and `.attr()` methods.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmark beyond the `dataset` property.

Related benchmarks:

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

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

Created: one year 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 5 months ago):