Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Dataset vs getAttribute vs Property v2
(version: 1)
Comparing performance of:
Dataset vs getAttribute
Created:
5 years ago
by:
Registered User
Go to the latest result
HTML Preparation code:
<h3 id="data" data-test="text" data-id="some-id">Hello world!</h3>
Tests:
Dataset
const element = document.querySelector("#data"); const { test, id } = element.dataset; const testId = test + id;
getAttribute
const element = document.querySelector("#data"); const test = element.getAttribute('data-test'); const id = element.getAttribute('data-id'); const testId = test + id;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Dataset
getAttribute
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/137.0.0.0 Safari/537.36
Browser/OS:
Chrome 137 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=612254" width="100%" height="500px"></iframe>
getAttribute
8.1M/s
Dataset
3.8M/s
View exact numbers
Test name
Executions per second
✓
getAttribute
8,077,245 Ops/sec
Dataset
3,834,502 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what is being tested. **Benchmark Overview** The benchmark measures the performance of two approaches to accessing data attributes in JavaScript: 1. `dataset` property 2. `getAttribute()` method **What are we testing?** We're comparing the execution speed of these two approaches on a web page with an HTML element that has two data attributes: `data-test` and `data-id`. The benchmark aims to determine which approach is faster. **Options Compared** The two options being compared are: 1. **`dataset` property**: This is a built-in property in JavaScript that allows accessing data attributes on an element. When you access a data attribute using the `dataset` property, it returns an object with the attribute name as the key and its value as the value. 2. **`getAttribute()` method**: This method retrieves the value of a specific attribute from an element. **Pros and Cons** * **`dataset` property**: + Pros: Faster execution, more concise code, and easier to read. + Cons: Not supported in older browsers (IE 10+, Edge 12+), and may not work with all attribute types. * **`getAttribute()` method**: + Pros: Supported by all modern browsers, including older ones. However, it can lead to more verbose code and may be slower due to the overhead of parsing attributes. + Cons: Can be slower than using the `dataset` property. **Library Usage** There is no library being used in this benchmark. The `dataset` property is a built-in JavaScript feature, and the `getAttribute()` method is also a native browser API. **Special JS Features or Syntax** None of the test cases use any special JavaScript features or syntax beyond what's required to access data attributes. **Other Considerations** * **Browser Support**: As mentioned earlier, older browsers (IE 10+, Edge 12+) may not support the `dataset` property. * **Performance Variability**: The benchmark results can vary depending on factors like page load time, network latency, and browser performance. These variables are not accounted for in this benchmark. **Alternatives** If you need to support older browsers or have specific requirements that aren't met by the `dataset` property, alternative approaches could include: * Using the `getAttribute()` method consistently across all browsers. * Implementing a custom solution using JavaScript's `requestAnimationFrame()` function or Web Workers to optimize performance. * Using a library like Lodash or Underscore.js to provide a more consistent and performant way of accessing data attributes. Keep in mind that these alternatives may have their own trade-offs and should be evaluated on a case-by-case basis.
Related benchmarks
dataset vs getAttribute speed
getAttribute('data-foo') vs dataset.foo
DataAttribute vs Class Selector on body
Check data attribute: hasAttribute vs dataset
Comments
Confirm delete:
Do you really want to delete benchmark?