<h3 id="data" data-test="1234">kipr202 header</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
window.onload = function() {
console.log(document.querySelector("h3#data").dataset.test);
}
window.onload = function() {
console.log(document.querySelector("h3#data").getAttribute("data-test"));
}
$(document).ready(function() {
console.log($("h3#data").data("test"));
});
$(document).ready(function() {
console.log($("h3#data").attr("data-test"));
});
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
dataset | |
getAttribute | |
jQuery .data() | |
jQuery .attr() |
Test name | Executions per second |
---|---|
dataset | 3401792.2 Ops/sec |
getAttribute | 3485524.0 Ops/sec |
jQuery .data() | 113595.2 Ops/sec |
jQuery .attr() | 118027.9 Ops/sec |
Let's break down the provided benchmark and explain what's being tested.
Benchmark Overview
The benchmark compares the performance of four different approaches to access data attributes on an HTML element:
dataset
property (introduced in ECMAScript 2017) to access the "test" attribute..getAttribute()
method: Using the traditional getAttribute()
method to retrieve the value of a specified attribute..data()
method: Using jQuery's .data()
method to store and retrieve arbitrary data associated with an element..attr()
method: Using jQuery's .attr()
method to retrieve the raw value of a specified attribute.Comparison
The test cases are designed to measure the execution speed of each approach, which is typically measured in terms of the number of executions per second (ExecutionsPerSecond). The comparison is between:
dataset
vs getAttribute()
: This tests whether using the dataset
property is faster or slower than using the traditional getAttribute()
method.jQuery .data()
vs jQuery .attr()
: This tests whether jQuery's .data()
method is faster or slower than its .attr()
method for retrieving attribute values.Pros and Cons of Each Approach
dataset
property):.getAttribute()
method:dataset
property..data()
method:.attr()
method:Library Usage
The benchmark uses jQuery, a popular JavaScript library, to demonstrate its .data()
and .attr()
methods.
Special JS Features or Syntax
There are no special JavaScript features or syntax used in this benchmark beyond the dataset
property.