Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Check data attribute: hasAttribute vs dataset
(version: 0)
Compare hasAttribute to in dataset
Comparing performance of:
hasAttribute vs dataset
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" data-foo></div>
Script Preparation code:
var element = document.getElementById("foo");
Tests:
hasAttribute
var foo = element.hasAttribute("data-foo");
dataset
var foo = "foo" in element.dataset;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
hasAttribute
dataset
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 18_3_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/134.0.6998.99 Mobile/15E148 Safari/604.1
Browser/OS:
Chrome Mobile iOS 134 on iOS 18.3.2
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=594109" width="100%" height="500px"></iframe>
hasAttribute
19.4M/s
dataset
9.3M/s
View exact numbers
Test name
Executions per second
✓
hasAttribute
19,405,950 Ops/sec
dataset
9,333,133 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **What is being tested?** The benchmark compares two ways to check if an element has a specific attribute or data property: `hasAttribute` and `in dataset`. Specifically, it tests whether `element.hasAttribute("data-foo")` is faster than `element["dataset"] == "foo"` (or simply `"foo" in element.dataset`) for the case where the element has a `data-foo` attribute. **Options compared:** There are two options being compared: 1. **hasAttribute**: This method checks if an element has a specific attribute by calling the `getAttribute()` method and checking if the returned value is truthy. 2. **in dataset**: This method uses the `in` operator to check if a property exists in the `dataset` object of an element. **Pros and Cons:** 1. **hasAttribute**: * Pros: Simple, lightweight, and widely supported by browsers. * Cons: May involve additional overhead due to attribute lookup, as `getAttribute()` must be called and then checked for truthiness. 2. **in dataset**: * Pros: Can be more efficient than `hasAttribute`, as it only requires a single property access and does not require an extra call to `getAttribute()`. * Cons: May not work in older browsers that do not support the `dataset` object or its syntax. **Other considerations:** * **Library usage**: The benchmark uses the `element` object, which is likely part of the DOM API. In this case, no library is explicitly used. * **Special JS features/syntax**: No special JavaScript features or syntax are used in these test cases (e.g., async/await, arrow functions, etc.). **Alternatives:** If you're interested in testing other methods for checking attributes or data properties, you could consider adding new benchmark definitions with the following alternatives: * Using `element.getAttribute("data-foo") === "foo"` instead of `hasAttribute` * Using `Object.prototype.hasOwnProperty.call(element.dataset, "foo")` instead of `in dataset` * Using a library like Lodash's `get()` method or a custom implementation for attribute checking Keep in mind that these alternatives might have different performance characteristics and may require additional setup or modifications to the benchmark.
Related benchmarks
getAttribute vs dataset
hasAttribute vs dataset
hasAttribute vs getAttribute vs dataset
getAttribute vs dataset (without explicit loop)
Comments
Confirm delete:
Do you really want to delete benchmark?