Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
hasAttribute vs getAttribute vs dataset
(version: 0)
Compare setAttribute to dataset
Comparing performance of:
getAttribute vs dataset vs has attr
Created:
one year ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="foo" data-foo="foo_id"></div>
Tests:
getAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.getAttribute("data-foo"); }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.dataset.foo; }
has attr
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.hasAttribute("data-foo"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
getAttribute
dataset
has attr
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
6 days 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
Test name
Executions per second
getAttribute
87892.3 Ops/sec
dataset
869.7 Ops/sec
has attr
89952.7 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The MeasureThat.net benchmark compares three approaches to accessing attribute values in HTML elements: `getAttribute`, `dataset`, and `hasAttribute`. The test cases are designed to measure the performance differences between these approaches on a specific webpage. **Test Cases** There are three individual test cases: 1. **`getAttribute`**: This test case uses the `getAttribute()` method to access the value of the `data-foo` attribute in an HTML element. 2. **`dataset`**: This test case uses the `dataset` property to access the value of the `data-foo` attribute in an HTML element. 3. **`hasAttribute`**: This test case uses the `hasAttribute()` method to check if an attribute is present on an HTML element, and then accesses the attribute value using the `getAttribute()` method. **Options Compared** The benchmark compares the following options: * `getAttribute`: Accessing attribute values using the `getAttribute()` method. * `dataset`: Using the `dataset` property to access attribute values. * `hasAttribute`: Checking if an attribute is present on an element and then accessing its value using `getAttribute`. **Pros and Cons of Each Approach** * **`getAttribute`**: + Pros: Widely supported, works in older browsers, easy to use. + Cons: Can be slower than other approaches, may require more CPU cycles due to the explicit attribute lookup. * **`dataset`**: + Pros: Modern, efficient way to access attribute values, works well with HTML5 attributes. May be faster than `getAttribute`. + Cons: Not supported in older browsers (IE8-), requires a compatible browser or polyfill. * **`hasAttribute`**: + Pros: Checking if an attribute is present can be faster than using `getAttribute`, then accessing its value. However, it still uses the same CPU cycles to access the attribute value as `getAttribute`. + Cons: May not be as efficient as `dataset`, requires two steps (checking and then accessing). **Library Usage** None of the test cases use any external libraries. **Special JS Feature or Syntax** * **`dataset`**: This property was introduced in HTML5 and allows for more convenient access to attribute values using dot notation (`element.dataset.foo`). * **`hasAttribute()`**: This method was introduced in ECMAScript 2019 (ES2020) as a way to check if an attribute is present on an element without having to use `getAttribute()` explicitly. **Other Alternatives** If you need more performance or want to explore other approaches, consider the following: * **`setAttribute()`**: Instead of accessing attribute values, you can set attributes using `setAttribute()`. This might be faster than accessing attribute values in some cases. * **`dataset`-like properties**: Some libraries (e.g., jQuery) provide their own `dataset`-like properties for older browsers. However, these may not offer the same performance as native HTML5 `dataset` support. Keep in mind that browser support and performance can vary greatly depending on the specific test case and implementation details. MeasureThat.net's benchmark results should be used to inform your decision-making process when choosing between these approaches.
Related benchmarks:
getAttribute vs dataset 2
hasAttribute vs dataset
Check data attribute: hasAttribute vs dataset
getAttribute vs dataset (without explicit loop)
Comments
Confirm delete:
Do you really want to delete benchmark?