Benchmark: Iterate / Loop over + Filter data-* attributes

HTML Preparation code:

<div id="div" data-foo="foo" data-bar="bar" data-baz="baz" data-test-a="a" data-test-b="b" data-test-c="c">

Script Preparation code:

let div = document.getElementById('div');

Tests:

Object.keys() + .dataset
Object.keys(div.dataset).filter(v => v.startsWith('test')).map(v => v.substring(4).toLowerCase());
Array.from() + .attributes
Array.from(div.attributes).map(a => a.nodeName).filter(v => v.startsWith('data-test-')).map(v => v.substring(10));
for + .attributes
let l = []; for(var i=0; i < div.attributes.length; i++) { let n = div.attributes[i].nodeName; if(n.startsWith('data-test-')) l.push(n.substring(10)); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.keys() + .dataset
Array.from() + .attributes
for + .attributes

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 21 days ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.keys() + .dataset	955685.9 Ops/sec
Array.from() + .attributes	794734.0 Ops/sec
for + .attributes	1026422.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):

LLMs can make mistakes. Check important info.

The benchmark presented tests various methods of iterating over and filtering data-* attributes in a DOM element (a `<div>` in this case). The focus is on performance comparisons among three different approaches: using `Object.keys()` with the `.dataset` property, using `Array.from()` with `.attributes`, and using a traditional `for` loop with `.attributes`.

### Benchmark Options Compared

1. **`Object.keys() + .dataset`**
   - **Definition**: This method uses `Object.keys()` to retrieve the keys of the `dataset`, filters them to only include those that start with "test", and then transforms the keys by removing the "test-" prefix and converting them to lowercase.
   - **Pros**: 
     - Concise and expressive.
     - Leverages ES6 syntax (arrow functions) for cleaner code.
     - Directly accesses the `dataset`, making it potentially more straightforward for data attributes defined in HTML.
   - **Cons**:
     - Performance might be impacted due to the overhead of creating an array of keys and the subsequent filter and map processes, especially if the dataset grows larger.

2. **`Array.from() + .attributes`**
   - **Definition**: This method converts the `attributes` collection (a live collection) to an array using `Array.from()`, filters for attributes that start with "data-test-", and then transforms them by removing the "data-test-" prefix.
   - **Pros**:
     - More flexible in case the attributes don't necessarily follow the `data-*` convention or if you want to inspect all attributes.
     - Uses the array transformation capabilities of ES6, which can be a good practice, enhancing readability.
   - **Cons**:
     - Slightly more overhead due to the conversion from a live collection to a static array.
     - The use of two filtering operations (filter and map) may reduce performance.

3. **`for + .attributes`**
   - **Definition**: A traditional loop iterates through the `attributes` collection, checks each attribute's name, and if it starts with "data-test-", it pushes the value (minus the prefix) into a new array.
   - **Pros**:
     - Likely the fastest of the three methods, especially when dealing with a smaller number of attributes.
     - Minimal overhead with direct manipulation of the attributes collection.
     - More efficient in terms of memory, as it avoids creating intermediate arrays.
   - **Cons**:
     - Verbose and less elegant than other methods, which may detract from readability.
     - More prone to errors if not handled carefully, such as forgetting to increment the loop counter.

### Performance Results

The benchmark results indicate that the `for + .attributes` method is the most performant, achieving an execution rate of approximately 1,026,423 executions per second. In comparison, the `Object.keys() + .dataset` method performed at around 955,686 executions per second, and `Array.from() + .attributes` was slightly slower at around 794,734 executions per second.

### Other Considerations

- **Browser Environment**: All tests were executed in Chrome 130 on macOS, which indicates that these performance results might vary across different browsers and systems. Performance could differ significantly based on the JavaScript engine's optimizations.
- **Readability vs. Performance**: There's often a trade-off between writing cleaner, more maintainable code and achieving optimal performance. In applications where performance is critical, however, more verbose and less elegant solutions (like the `for` loop) might be justified.
- **Use Cases**: The approach chosen often depends on the specific requirements of the application. For small datasets, readability might be prioritized, while for larger datasets or performance-critical applications, the fastest solution could be more appropriate.

### Alternatives

Beyond the methods tested, there are several other approaches one could consider:

- **Using `forEach` or `map` directly on `NodeList`:** The `NodeList` returned by `querySelectorAll()` can be used with `forEach`, though it may still require additional handling to filter and transform.
- **Using modern frameworks/libraries**: Frameworks like React or libraries such as jQuery can abstract away these iterations, but often at the cost of performance and verbosity inherent to those tools.

Understanding the context and requirements is critical when choosing the appropriate method for performance and maintainability in JavaScript operations.

Related benchmarks:

Iterate / Loop over + Filter data-* attributes (version: 1)

Comparing performance of: Object.keys() + .dataset vs Array.from() + .attributes vs for + .attributes

Created: 21 days ago by: Registered User

Jump to the latest result

Object.keys() + .dataset

Array.from() + .attributes

for + .attributes

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):