Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Corrected! getAttribute & setAttribute VS dataset
(version: 0)
Benchmark.js
Comparing performance of:
getAttribute & setAttribute vs dataset
Created:
4 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
getAttribute & setAttribute
dataset
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
10 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=619892" width="100%" height="500px"></iframe>
getAttribute & setAttribute
7/s
dataset
6/s
View exact numbers
Test name
Executions per second
✓
getAttribute & setAttribute
7 Ops/sec
dataset
6 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
dataset vs getAttribute speed
getAttribute('data-foo') vs dataset.foo
Check data attribute: hasAttribute vs dataset
getAttribute vs dataset (without explicit loop)
Comments
Confirm delete:
Do you really want to delete benchmark?