Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Dataset vs getAttribute x2xqa2
(version: 0)
Benchmark.js
Comparing performance of:
dataset vs getAttribute vs getAttribute2
Created:
5 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var els = []; for (var i = 0; i < 10000; i++){ var el = document.createElement("div"); el.setAttribute("data-test", 1); els.push(el); }
Tests:
dataset
var attrs = []; for (var i = 0; i < els.length; i++){ attrs.push(els[i].dataset.test); } if (attrs.length !== els.length){ throw "error" }
getAttribute
var attrs = []; for (var i = 0; i < els.length; i++){ attrs.push(els[i].getAttribute("data-test")); } if (attrs.length !== els.length){ throw "error" }
getAttribute2
var attrs = []; for (var i = 0; i < els.length; i++){ els[i].getAttribute && attrs.push(els[i].getAttribute("data-test")); } if (attrs.length !== els.length){ throw "error" }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
dataset
getAttribute
getAttribute2
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0
Browser/OS:
Firefox 150 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=628288" width="100%" height="500px"></iframe>
getAttribute2
3K/s
getAttribute
2K/s
dataset
489/s
View exact numbers
Test name
Executions per second
✓
getAttribute2
2,515 Ops/sec
getAttribute
2,074 Ops/sec
dataset
489 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON and explain what's being tested. **Benchmark Overview** The benchmark is testing three approaches to retrieve the value of an attribute from HTML elements in JavaScript: 1. **`dataset`**: Using the `dataset` property directly on the HTML element. 2. **`getAttribute`**: Using the `getAttribute` method with a string argument (in this case, `"data-test"`). 3. **`getAttribute2`**: Using a conditional expression (`els[i].getAttribute &&`) to call the `getAttribute` method only if it's truthy. **Pros and Cons of each approach** 1. **`dataset`**: * Pros: Fast and efficient, as it directly accesses the attribute value. * Cons: Not supported in older browsers (e.g., IE 11) that don't have the `dataset` property. Additionally, some developers might not be familiar with this property. 2. **`getAttribute`**: * Pros: Widely supported across most browsers, including older ones like IE 11. * Cons: Can be slower than using the `dataset` property due to additional overhead (e.g., parsing the string argument). 3. **`getAttribute2`**: * Pros: Provides a fallback for older browsers that don't support the `dataset` property or prefer a more explicit approach. * Cons: Requires an extra conditional check, which can be slightly slower than direct access. **Library and Special JS Features** The benchmark uses none of any libraries. However, it does rely on JavaScript features specific to certain browsers: * The `dataset` property is only supported in HTML5 compliant browsers (e.g., Chrome 1+, Firefox 3+). Older browsers like IE 11 don't support this feature. * The `getAttribute` method has been part of the DOM API since early versions of IE, but its usage was not widely adopted until recent years. **Other Alternatives** If you're looking for alternative approaches to retrieve attribute values in JavaScript, consider: 1. **QuerySelectorAll**: Another way to access elements using CSS selectors. 2. **DOM traversal methods**: Using `querySelector`, `querySelectorAll`, or other DOM traversal methods can be faster than attribute-based approaches. In conclusion, the benchmark is testing three common ways to retrieve attribute values from HTML elements in JavaScript: `dataset` (fast and efficient), `getAttribute` (widely supported but potentially slower), and `getAttribute2` (a fallback for older browsers).
Related benchmarks
dataset vs getAttribute speed
getAttribute('data-foo') vs dataset.foo
getAttribute vs dataset gregdaynes destructure
getAttribute vs dataset gregdaynes destructure multiple getAttribute
getAttribute vs dataset (without explicit loop)
Comments
Confirm delete:
Do you really want to delete benchmark?