Benchmark: Corrected! getAttribute & setAttribute VS dataset

HTML Preparation code:

<main id="test" data-info="data" data-info2="null">TEST</main>

Tests:

getAttribute & setAttribute
let ele=document.getElementById("test"); let i=2000; let info='ai'; while(i--){ info=ele.getAttribute("data-info"); info+=i; ele.setAttribute("data-info2",info); ele.setAttribute("data-ainfo",info); console.log(info); }
dataset
let ele=document.getElementById("test"); let z=2000; let info='az'; while(z--){ info=ele.dataset.info; info+=z; ele.dataset.info2=info; ele.dataset.binfo=info; console.log(info); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttribute & setAttribute
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Mobile Safari/537.3

Browser/OS: Chrome Mobile 134 on Android

View result in a separate tab

Test name	Executions per second
getAttribute & setAttribute	6.7 Ops/sec
dataset	6.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its test cases, explaining what's being tested, compared, and discussing the pros and cons of each approach.

**Benchmark Overview**

MeasureThat.net is testing two different ways to access and update data attributes on an HTML element in JavaScript. The tests are comparing the performance of using `getAttribute` and `setAttribute` with `dataset` (a newer feature introduced in HTML5).

**Individual Test Cases**

There are two test cases:

1. **"getAttribute & setAttribute"**
This test case uses the traditional method of accessing and updating data attributes on an element using `getAttribute` and `setAttribute`. The script retrieves an element by its ID, assigns a value to `i`, and then enters a loop where it updates the `data-info` attribute with the current value of `info` (which is incremented in each iteration), as well as two other non-existent attributes (`data-ainfo` and `ele.setAttribute("non-existent", "value")`). The test also logs the updated values to the console.

2. **"dataset"**
This test case uses the newer `dataset` API, which allows accessing and updating data attributes on an element without using `getAttribute` and `setAttribute`. The script retrieves an element by its ID, assigns a value to `z`, and then enters a loop where it updates the `info` property of the element's dataset object with the current value of `info` (which is incremented in each iteration), as well as two other non-existent properties (`info2` and `binfo`). The test also logs the updated values to the console.

**Library and Purpose**

In both test cases, there is no explicitly mentioned library. However, the use of `dataset` suggests that the browser being tested (Firefox 125) supports the `dataset` API. This API is a part of the HTML5 specification and provides a way to store and retrieve arbitrary data associated with an element's ID.

**Special JS Features/Syntax**

Neither test case uses any special JavaScript features or syntax beyond what's standard in modern JavaScript. However, it's worth noting that using `dataset` is a relatively new feature (introduced in HTML5), so support for it may vary across browsers and versions.

**Performance Comparison**

The performance comparison between the two approaches is likely due to the difference in how they access and update data attributes:

* Using `getAttribute` and `setAttribute` involves a DOM query, attribute lookups, and setting of attributes, which can be slower than using the `dataset` API.
* The `dataset` API provides faster access to data attributes because it doesn't require a separate DOM query or attribute lookup.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

**"getAttribute & setAttribute"**

Pros:

* Wide browser support
* Familiar interface for accessing and updating attributes

Cons:

* Slower performance due to additional DOM queries and attribute lookups

**"dataset"**

Pros:

* Faster access to data attributes
* More efficient updates to dataset properties

Cons:

* Requires modern browser support (HTML5)

**Other Alternatives**

Besides `getAttribute` and `setAttribute`, there are other ways to access and update data attributes on an element, such as using CSS classes or JavaScript libraries like jQuery. However, these alternatives may introduce additional complexity or dependencies that could affect performance.

In general, the choice of approach depends on the specific requirements of your project, including factors like browser support, performance, and maintainability.

Related benchmarks:

Corrected! getAttribute & setAttribute VS dataset (version: 0)

Comparing performance of: getAttribute & setAttribute vs dataset

Created: 3 years ago by: Guest

Jump to the latest result

getAttribute & setAttribute

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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