<div class="data" data-test="lorem">test dataset</h3>
document.querySelector('.data').dataset.test;
document.querySelector('.data').getAttribute('test');
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
dataset | |
getAttribute |
Test name | Executions per second |
---|---|
dataset | 2389658.0 Ops/sec |
getAttribute | 3669518.0 Ops/sec |
Let's break down the provided JSON benchmark definition and test cases to understand what's being tested.
Benchmark Definition
The benchmark is defined as a simple script that creates an HTML element with a dataset attribute and then queries it using two different methods: dataset
and getAttribute
. The HTML structure is:
<div class="data" data-test="lorem">test dataset</h3>
Test Cases
There are two test cases:
dataset
: This test case uses the dataset
property of the element to access its attributes.getAttribute
: This test case uses the getAttribute()
method of the element to retrieve the value of the attribute with key 'test'
.What is being tested?
The benchmark is testing the speed difference between two approaches:
dataset
property to access an attribute (e.g., document.querySelector('.data').dataset.test;
)getAttribute()
method to retrieve an attribute value (e.g., document.querySelector('.data').getAttribute('test');
)Pros and Cons
dataset
: Pros:getAttribute()
.
Cons:getAttribute()
: Pros:dataset
.Library:
There is no specific library being used in this benchmark. The tests are using built-in JavaScript APIs.
Special JS feature or syntax:
The benchmark uses a relatively modern JavaScript feature: the dataset
property, which was introduced in ECMAScript 2017 (ES7). This property allows elements to store and retrieve arbitrary key-value pairs as attributes.
Other alternatives:
If you want to compare other approaches, here are some additional options:
getAttribute()
with a default value:document.querySelector('.data').getAttribute('test', 'default_value');
function getAttribute(element, key) {
return element.getAttribute(key);
}
// ...
document.querySelector('.data').getAttribute('test', getAttribute);
Keep in mind that these alternatives may introduce additional overhead or complexity, so it's essential to consider your specific use case and performance requirements before using them.