Benchmark: querySelectorAll data attribute vs class name vs combined - another

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');
class name with data attribute
var test = document.querySelectorAll('.test[data-attribute="test"]');
data attribute without value
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
class name with data attribute
data attribute without value

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
data attribute with value	1245818.6 Ops/sec
class name	1423318.2 Ops/sec
class name with data attribute	589769.6 Ops/sec
data attribute without value	697010.1 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark from MeasureThat.net evaluates the performance of different selectors used in the `querySelectorAll` method in JavaScript. Specifically, it compares four different ways to select DOM elements based on their attributes and classes.

### Breakdown of the Tests

1. **Data Attribute with Value**
   - **Benchmark Definition**: `var test = document.querySelectorAll('[data-attribute="test"]');`
   - This test selects all elements that have a specific data attribute (`data-attribute`) set to `"test"`.

2. **Class Name**
   - **Benchmark Definition**: `var test = document.querySelectorAll('.test');`
   - This selects all elements that have a class of `test`. Selecting by class is generally faster since class names are often optimized in browsers.

3. **Class Name with Data Attribute**
   - **Benchmark Definition**: `var test = document.querySelectorAll('.test[data-attribute="test"]');`
   - This combines both class selection and data attribute selection. It selects elements that have the class `test` and also a `data-attribute` with the value `"test"`.

4. **Data Attribute Without Value**
   - **Benchmark Definition**: `var test = document.querySelectorAll('[data-attribute]');`
   - This test selects elements that have the `data-attribute` attribute defined, regardless of its value. This could potentially select more elements than the other tests.

### Results Summary

From the latest benchmark results, we observe the following **Executions Per Second** (a measure of performance):

- **Class Name**: 3,092,994.5 SPS (highest performance)
- **Data Attribute with Value**: 2,678,775.5 SPS
- **Data Attribute Without Value**: 1,705,943.625 SPS
- **Class Name with Data Attribute**: 1,537,057.625 SPS (lowest performance)

### Pros and Cons of Each Approach

- **Data Attribute with Value**:
  - **Pros**: Useful for selecting elements based on specific data-driven attributes.
  - **Cons**: Slower than class selection; may only select a limited set of elements.

- **Class Name**:
  - **Pros**: Generally faster and more efficient as browsers optimize for class selectors.
  - **Cons**: Requires class names to be set correctly on the elements.

- **Class Name with Data Attribute**:
  - **Pros**: Provides more targeted selections utilizing both classes and attributes.
  - **Cons**: Likely to be slower due to the combination of selectors.

- **Data Attribute Without Value**:
  - **Pros**: Very inclusive; can select all elements with a particular data attribute.
  - **Cons**: May return too many elements; slower than class selectors due to the breadth of selection.

### Other Considerations

**Browser Optimization**: Depending on the browser's internal optimization mechanisms, different selectors may perform differently. Testing should be done in the actual environment where code is expected to run.

**Maintainability and Readability**: While performance is important, code readability and maintainability should also be considered. Selectors that are intuitive to other developers can greatly enhance future collaborations.

**Alternatives to querySelectorAll**: 
- **getElementsByClassName**: This method returns a live HTMLCollection of elements with the specified class name, which is more performance-efficient when dealing with class-based selectors. 
- **getElementsByTagName**: Similar to the above but based on tag names. 
- **getAttribute** for specific attributes if the exact filtering isn't necessary.
- Libraries like jQuery offer chaining and simplified selectors but can introduce overhead.

Overall, this benchmark highlights the trade-offs between different selector strategies in JavaScript and provides insights into how developers can make informed decisions based on performance metrics for their specific applications.

Related benchmarks:

querySelectorAll data attribute vs class name vs combined - another (version: 1)

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

Created: 4 months ago by: Guest

Jump to the latest result

data attribute with value

class name

class name with data attribute

data attribute without value

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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