In this benchmark, two different approaches for accessing HTML element data attributes are compared. The goal is to measure the performance of using the dataset property versus filtering through the attributes collection of an HTML element. Here's a detailed breakdown of each approach:

Test Cases Overview

1. Using attributes:

   var element = document.getElementById("foo");
   var i = 10000;
   while (i--) {
       var foo = Object.fromEntries([...element.attributes].filter(({ name }) => name.startsWith("data-")).map(({ name, value }) => ([name.slice(5), value])));
   }
   

   • Description: This code retrieves the attributes collection of the element with the ID "foo". It filters this collection to find attributes that start with "data-", then transforms these attributes into an object where the keys are the attribute names (stripped of the 'data-' prefix) and the values are the attributes' respective values.
   • Pros:
     • More flexible, as it directly accesses attributes and can be easily modified to work with non-data attributes if needed.
   • Cons:
     • More verbose and potentially less performant due to the overhead of creating an array from the attributes collection, filtering it, and then mapping it into an object.
     • Iterating through all attributes can be less efficient compared to directly accessing data attributes if the number of attributes is large.

2. Using dataset:

   var element = document.getElementById("foo");
   var i = 10000;
   while (i--) {
       var foo = { ...element.dataset };
   }
   

   • Description: This code simply copies all data attributes (those prefixed with "data-") from element's dataset into a new object using the spread operator.
   • Pros:
     • More concise and easier to read. It directly accesses the data attributes without the need for filtering.
     • Likely to be more performant as it doesn't require additional steps like filtering and mapping through attributes.
   • Cons:
     • Less flexible than the attributes approach if modifications or custom handling of normal attributes is needed.

Benchmark Results

According to the results:

• The attributes test runs at approximately 125.4 executions per second.
• The dataset test runs at approximately 88.3 executions per second.

Summary of Findings

The benchmark shows that the attributes approach outperformed the dataset approach in this specific case. This might be counterintuitive given the general expectations regarding the performance of accessing the dataset property directly. The performance difference can be attributed to how quickly JavaScript engines optimize for certain patterns and, in some cases, the characteristics of the environment, as well as how the benchmark was set up (for instance, the number of iterations).

Alternatives

• Using Data Attributes via jQuery or Other Libraries: If a project already incorporates libraries like jQuery, one could utilize its functions for a simplified interface for accessing data attributes, although it may introduce additional overhead.
• Custom Data Handling Mechanisms: For more complex data structures, creating a robust mechanism to handle and parse attributes or using data binding frameworks (like React or Vue) can offer more flexibility.

In conclusion, the choice of approach should take into account the specific context of how attributes will be used, and it generally pays to benchmark different solutions if performance is a critical factor.