Benchmark: DataAttribute vs Class Selector vs ID Selector vs Class & Data Attribute Selector

HTML Preparation code:

<div class="hello" id="hello" data-hello>Hello</div>

Tests:

Class
document.querySelector('.hello');
ID
document.querySelector('#hello');
data attribute
document.querySelector('[data-hello]');
Class attribute
document.querySelector('.hello[data-hello]');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class
ID
data attribute
Class attribute

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

The benchmark provided compares the performance of various CSS selectors in the `document.querySelector` method of JavaScript. The tests evaluate how efficiently different types of selectors can retrieve an HTML element from the DOM, specifically targeting an element set up with a class, an ID, and a data attribute.

### Test Cases Overview

1. **Class Selector**: 
   - **Benchmark Definition**: `document.querySelector('.hello');`
   - **Test Name**: "Class"
   - This test checks the efficiency of selecting an element based on its class name. Class selectors are generally fast due to their common use in HTML and CSS.

2. **ID Selector**: 
   - **Benchmark Definition**: `document.querySelector('#hello');`
   - **Test Name**: "ID"
   - Here, the benchmark tests the performance of selecting an element by its ID. ID selectors are unique to a single element, which often allows for rapid retrieval.

3. **Data Attribute Selector**: 
   - **Benchmark Definition**: `document.querySelector('[data-hello]');`
   - **Test Name**: "data attribute"
   - This test evaluates performance when selecting elements by their custom data attributes (using the `data-*` HTML5 syntax). This is useful for embedding extra information on elements without using custom attributes.

4. **Class & Data Attribute Selector**: 
   - **Benchmark Definition**: `document.querySelector('.hello[data-hello]');`
   - **Test Name**: "Class attribute"
   - This benchmark checks the combination of a class selector and a data attribute selector. It tests the efficiency when multiple conditions must be satisfied to select an element.

### Results Summary

The benchmark results indicate the number of executions per second for each selector type on a specific browser and platform.

- **Class Selector**: 7,059,036 executions/second - The fastest among the tests, likely due to the optimization of class selectors in modern JavaScript engines.
  
- **Class & Data Attribute Selector**: 5,766,518 executions/second - Also relatively fast, but slightly slower than just a class selector, which is expected since it requires checking two conditions.

- **ID Selector**: 5,012,498.5 executions/second - Slower than the class selector but still efficient. The uniqueness of ID selectors typically allows for faster retrieval, although it might not have as much performance boost as expected due to the added complexity of the browser's selector engine.

- **Data Attribute Selector**: 4,885,156 executions/second - This selector type shows the slowest performance in this benchmark. While useful for specific use cases, data attribute selectors tend to aggregate less optimized retrieval times compared to class and ID selectors.

### Pros and Cons

- **Class Selector**:
  - **Pros**: Fast performance, widely used.
  - **Cons**: Can match multiple elements, leading to ambiguous targeting if not handled properly.

- **ID Selector**:
  - **Pros**: Unique targeting, efficient for single elements.
  - **Cons**: Limited to one per page; overuse can lead to issues in styling and scripts.

- **Data Attribute Selector**:
  - **Pros**: Flexible in storing additional information; semantic structure.
  - **Cons**: Slower performance, might complicate selector paths.

- **Class & Data Attribute Selector**:
  - **Pros**: Combines specificity of class and flexibility of attributes, leading to unique targeting.
  - **Cons**: Increased selector complexity may slow down performance compared to simpler selectors.

### Other Considerations and Alternatives

1. **Performance Optimization**: While data attributes can be slower, their flexibility often compensates for this in real-world applications where semantic data is critical. Developers should balance performance needs with the necessity of using more informative attributes.

2. **Alternative Libraries**: Libraries such as jQuery provide high-level abstractions that can simplify the use of selectors across different browsers, enabling consistent behavior. However, using jQuery can introduce performance overhead due to its additional abstraction layer.

3. **Native DOM Manipulation**: Direct use of native JavaScript (`document.querySelector` or `document.getElementById`) is optimal for speed-sensitive applications. This minimizes overhead and enhances performance.

4. **CSS Selectors vs. XPath**: In scenarios where complex queries are necessary, XPath provides more powerful querying capabilities, especially in XML documents and when dealing with nested structures. However, it is not natively supported in browsers for HTML documents.

5. **Caching Selectors**: For performance-critical applications, it’s advisable to cache selected elements after the first execution, reducing redundant queries on the same selectors.

In summary, this benchmark provides valuable insights into the performance landscape of various CSS selectors in JavaScript, enabling developers to make informed decisions based on their specific requirements and constraints.

Latest run results:

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

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

Browser/OS: Yandex Browser 24 on Windows

View result in a separate tab

Test name	Executions per second
Class	7059036.0 Ops/sec
ID	5012498.5 Ops/sec
data attribute	4885156.0 Ops/sec
Class attribute	5766518.0 Ops/sec

Related benchmarks:

DataAttribute vs Class Selector vs ID Selector vs Class & Data Attribute Selector (version: 0)

Comparing performance of: Class vs ID vs data attribute vs Class attribute

Created: 24 days ago by: Guest

Jump to the latest result

Class

ID

data attribute

Class attribute

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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