Benchmark: querySelectorAll data attribute vs class name v2

HTML Preparation code:

<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>

Tests:

data attribute with value
var test = document.querySelectorAll('[data-attribute="test"]');
class name
var test = document.querySelectorAll('.test');
data attribute
var test = document.querySelectorAll('[data-attribute]');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
data attribute with value
class name
data attribute

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Windows

View result in a separate tab

Test name	Executions per second
data attribute with value	1091333.0 Ops/sec
class name	1646096.1 Ops/sec
data attribute	1517226.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of different selector queries using the `document.querySelectorAll()` method in JavaScript when applied to a set of HTML elements. The benchmark specifically compares three approaches for selecting elements from the DOM (Document Object Model):

### Test Cases and Descriptions

1. **Data Attribute with Value**:
   - **Benchmark Definition**: `var test = document.querySelectorAll('[data-attribute="test"]');`
   - This case selects all elements that have a specific value for a data attribute (`data-attribute="test"`).
   
2. **Class Name**:
   - **Benchmark Definition**: `var test = document.querySelectorAll('.test');`
   - Here, the selector targets elements by their class name (`class="test"`). This is a common way to select multiple elements that share the same class.

3. **Data Attribute**:
   - **Benchmark Definition**: `var test = document.querySelectorAll('[data-attribute]');`
   - This query selects all elements that contain the `data-attribute` attribute, regardless of its value.

### Performance Results

The results from the benchmark show the number of executions per second for each approach in a Firefox environment:

- **Class Name**: 854,068.19 executions/second
- **Data Attribute**: 831,345.81 executions/second
- **Data Attribute with Value**: 608,197.94 executions/second

### Pros and Cons of Each Approach

1. **Class Name**:
   - **Pros**:
     - Generally faster in modern browsers, as class selectors are optimized and widely used.
     - Highly readable and straightforward to use.
   - **Cons**:
     - Limited to elements that actually have the specified class, which may not be acceptable in all contexts.

2. **Data Attribute with Value**:
   - **Pros**:
     - Useful for selecting elements based on specific values of data attributes, offering high granularity.
     - Suitable for scenarios where class names may be insufficient or colliding.
   - **Cons**:
     - Typically slower than class selectors as the CSS engine may not optimize these queries as effectively.

3. **Data Attribute**:
   - **Pros**:
     - Can select multiple elements that have the attribute regardless of their values, providing flexibility.
   - **Cons**:
     - Slower than both class and specific data attribute selectors, as the query must inspect all elements for the presence of the attribute.

### Other Considerations

- **Browser Performance Variations**: Performance can vary across different browsers and their versions due to differences in optimization strategies for CSS selector queries.
- **Readability and Maintenance**: Choose a selector that not only performs well but is also maintainable, considering future developers who might work with this code.
- **Overhead from Attributes**: When using data attributes, keep in mind the potential overhead of having many attributes in the DOM, which could affect rendering or memory usage.
  
### Alternative Approaches

1. **Using `getElementsByClassName`**: This method could also be considered for selecting elements by class name. It returns a live HTMLCollection of elements with the specified class name. While it may be less flexible than `querySelectorAll`, it can be faster for pure class name selections due to its direct lookup mechanism.

2. **Using `getElementById`**: For selecting a single element with a specific ID, using `document.getElementById('id')` is the most performant choice.

3. **Caching Selectors**: For repeated access to the same elements, caching the results of a selector query in a variable (so it doesn't have to be re-evaluated multiple times) can enhance performance.

In summary, while the benchmark showcases different approaches for selecting DOM elements, the choice among these methods should consider performance, readability, and specific use-case requirements.

Related benchmarks:

querySelectorAll data attribute vs class name v2 (version: 1)

Comparing performance of: data attribute with value vs class name vs data attribute

Created: one month ago by: Guest

Jump to the latest result

data attribute with value

class name

data attribute

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):