Benchmark: Multiple getAttribute vs dataset

HTML Preparation code:

<div id="foo" data-foo="foo_id" data-foo2="foo_id2" data-foo3="foo_id3" data-foo4="foo_id4" data-foo5="foo_id4"></div>

Tests:

getAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.getAttribute("data-foo"); var foo2 = element.getAttribute("data-foo2"); var foo3 = element.getAttribute("data-foo3"); var foo4 = element.getAttribute("data-foo4"); var foo5 = element.getAttribute("data-foo5"); }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.dataset.foo; var foo2 = element.dataset.foo2; var foo3 = element.dataset.foo3; var foo4 = element.dataset.foo4; var foo5 = element.dataset.foo5; }
dataset destructurization
var element = document.getElementById("foo"); var i = 10000; while (i--) { var { foo, foo2, foo3, foo4, foo5 } = element.dataset; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttribute
dataset
dataset destructurization

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
getAttribute	154224.0 Ops/sec
dataset	318.5 Ops/sec
dataset destructurization	436.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined by MeasureThat.net compares the performance of different methods for accessing custom data attributes in HTML elements. Specifically, it tests three approaches:
1. Using `getAttribute` to retrieve the values of data attributes.
2. Accessing data attributes using the `dataset` property of an element.
3. Destructuring the `dataset` property to extract multiple values in one statement.

### Options Compared
1. **getAttribute Method**:
   - **Benchmark Definition**:
     ```javascript
     var element = document.getElementById("foo");
     var i = 10000;
     while (i--) {
         var foo = element.getAttribute("data-foo");
         var foo2 = element.getAttribute("data-foo2");
         var foo3 = element.getAttribute("data-foo3");
         var foo4 = element.getAttribute("data-foo4");
         var foo5 = element.getAttribute("data-foo5");
     }
     ```
   - **Performance**: 154,223.95 executions per second.
   - **Pros**: Universal method applicable to all attributes, regardless of their prefix (data or otherwise).
   - **Cons**: Slower compared to accessing attributes via `dataset`, as it incurs additional overhead in parsing strings.

2. **dataset Property**:
   - **Benchmark Definition**:
     ```javascript
     var element = document.getElementById("foo");
     var i = 10000;
     while (i--) {
         var foo = element.dataset.foo;
         var foo2 = element.dataset.foo2;
         var foo3 = element.dataset.foo3;
         var foo4 = element.dataset.foo4;
         var foo5 = element.dataset.foo5;
     }
     ```
   - **Performance**: 318.50 executions per second.
   - **Pros**: Direct access to data attributes as JavaScript properties, optimized for performance.
   - **Cons**: Limited to attributes with `data-` prefix, which means it won't work for non-standard attributes or data passed in other formats.

3. **dataset Destructuring**:
   - **Benchmark Definition**:
     ```javascript
     var element = document.getElementById("foo");
     var i = 10000;
     while (i--) {
         var { foo, foo2, foo3, foo4, foo5 } = element.dataset;
     }
     ```
   - **Performance**: 435.97 executions per second.
   - **Pros**: Allows the extraction of multiple properties at once, making the code cleaner and potentially more efficient in terms of accessing object properties.
   - **Cons**: Slightly slower performance compared to the basic `dataset` access, likely due to the ongoing destructuring operation.

### Other Considerations
- **Performance Differences**:
  - The `getAttribute` method significantly outperforms the `dataset` property tests, showing that directly accessing data attributes as properties is much slower than the conventional approach of function calls. However, it's notable that data extraction using destructuring was relatively efficient compared to the `dataset` method.
  
- **Use Cases**: 
  - If there’s a need to often access multiple data attributes, the destructuring approach might be preferable for readability and maintaining cleaner code. For scenarios requiring a high performance with fewer calls, using `getAttribute` may be more advantageous, but this applies only to data that might not comply with the `data-` attribute formatting.

### Alternatives
- In addition to these methods, developers can also consider alternatives like:
  - **Caching Attribute Values**: Storing the values retrieved using `getAttribute` or via `dataset` in variables for reusability across the code.
  - **Custom Data Structures**: If many dynamic attributes are required, developers might consider using JavaScript objects or Maps to manage and access data more flexibly and efficiently beyond simple HTML attributes.
  
This benchmark provides vital insights into how different attribute access methods carry unique performance characteristics and should inform best practices in optimizing web applications with custom attributes.

Related benchmarks:

Multiple getAttribute vs dataset (version: 4)

Compare setAttribute to dataset in multiple getters

Comparing performance of: getAttribute vs dataset vs dataset destructurization

Created: one month ago by: Registered User

Jump to the latest result

getAttribute

dataset

dataset destructurization

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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