<div id="foo" data-foo="foo_id"></div>
var element = document.getElementById("foo");
var i = 10000;
while (i--) {
var foo = element.hasAttribute("data-foo");
}
var element = document.getElementById("foo");
var i = 10000;
while (i--) {
var foo = element.dataset.foo;
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
hasAttribute | |
dataset |
Test name | Executions per second |
---|---|
hasAttribute | 4711.5 Ops/sec |
dataset | 2125.2 Ops/sec |
Let's break down the provided benchmark and explain what is being tested.
Benchmark Overview
The benchmark compares two approaches to access the data-foo
attribute on an HTML element:
setAttribute
with hasAttribute
: This approach involves setting the data-foo
attribute using setAttribute
, followed by checking if it exists using hasAttribute
.data-foo
value as a property of the element
object.Options Compared
The benchmark tests two options:
setAttribute
to set the attribute and then checks if it exists using hasAttribute
.data-foo
value as a property of the element
object, without using setAttribute
.Pros and Cons
Here's a brief summary of the pros and cons of each approach:
Library/Tool Usage
There is no external library or tool being used in this benchmark. The code relies solely on standard JavaScript and HTML APIs.
Special JS Features/Syntax
The benchmark does not use any special JavaScript features or syntax, such as async/await
, try-catch
, or modern ECMAScript syntax (e.g., let
, const
, arrow functions).
Other Alternatives
If the benchmark were to test alternative approaches, some possible options could include:
_.has
).getAttribute()
and setAttribute()
, alongside the dataset approach.Keep in mind that these alternatives would require changes to the benchmark code and might not be directly comparable to the original test cases.