Benchmark: dataset keys vs attributes.filter

HTML Preparation code:

<div id="foo" class="foo bar bazzer" data-foo="foo_id" data-bar="bar_id" data-bazzer="bazzer_id"></div>

Tests:

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]))); }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = { ...element.dataset }; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
attributes
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
attributes	125.4 Ops/sec
dataset	88.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

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`:**
   ```javascript
   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`:**
   ```javascript
   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.

Related benchmarks:

dataset keys vs attributes.filter (version: 1)

checks which is faster between dataset and filtering attributes

Comparing performance of: attributes vs dataset

Created: one year ago by: Guest

Jump to the latest result

attributes

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):