Benchmark: DataAttribute vs Class Selector vs ID Selector vs Tag vs :is()

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]');
:is(div, span)
document.querySelector(':is(div,span)');
Tag
document.querySelector('div');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class
ID
data attribute
:is(div, span)
Tag

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
Class	6444537.0 Ops/sec
ID	2747858.8 Ops/sec
data attribute	2530727.2 Ops/sec
:is(div, span)	1353987.8 Ops/sec
Tag	7624936.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark measures the performance of different CSS selector types used in the JavaScript method `document.querySelector()`. The provided test cases compare the efficiency of selecting elements from the DOM (Document Object Model) by utilizing various selector strategies.

### Selector Types Compared

1. **Class Selector (`.hello`)**:
   - **Benchmark Definition**: `document.querySelector('.hello');`
   - **Test Name**: Class
   - **Performance**: This method ranks second in terms of performance, indicating it is relatively efficient in finding elements by class name.

2. **ID Selector (`#hello`)**:
   - **Benchmark Definition**: `document.querySelector('#hello');`
   - **Test Name**: ID
   - **Performance**: This option has lower performance compared to the class and tag selectors, indicating that while ID selectors are supposed to be unique and fast, they are not the most efficient in this case.

3. **Data Attribute Selector (`[data-hello]`)**:
   - **Benchmark Definition**: `document.querySelector('[data-hello]');`
   - **Test Name**: Data attribute
   - **Performance**: This selector is significantly slower than class and tag selectors, showcasing that data attributes can introduce overhead in selection.

4. **`:is()` Pseudo-Class Selector (`:is(div, span)`)**:
   - **Benchmark Definition**: `document.querySelector(':is(div,span)');`
   - **Test Name**: :is(div, span)
   - **Performance**: This is the slowest approach, as it involves evaluating multiple selectors (div and span) within the same statement. The `:is()` pseudo-class is a CSS selector that matches any of the specified selectors, which increases complexity and thus the potential for slower performance.

5. **Tag Selector (`div`)**:
   - **Benchmark Definition**: `document.querySelector('div');`
   - **Test Name**: Tag
   - **Performance**: This method is the fastest among all compared styles, reflecting the inherent efficiency when selecting all elements of a specified type.

### Trade-offs and Considerations

- **Performance**: The results indicate that tag selectors are the fastest, followed by class selectors, then data attributes, while ID selectors and pseudo-classes tend to be slower. When performance is a critical factor (e.g., in large-scale DOM manipulations), it would be wise to prefer tag or class selection over more complex selectors.

- **Readability and Maintainability**: While performance is essential, selectors that improve code readability (like class names) might be preferable even if they are slightly slower. Using `:is()` allows for more concise code but may introduce performance concerns, especially in performance-sensitive applications.

- **Scoped vs. Global Context**: Depending on the specific use case, the selectors may have different implications based on the layout and structure of the HTML document. For example, if there are many elements on a page, relying on unique IDs may be preferable to reduce lookup times.

### Alternatives

1. **Using jQuery**: While this benchmark focuses on native JavaScript methods, jQuery offers its own selector engine, which abstracts away many intricacies of DOM manipulation and may provide different performance implications.

2. **Memoization of Selectors**: If the same selectors are repeatedly used, storing results in a variable can reduce repeated DOM queries.

3. **Query Caching**: Implementing a manual caching mechanism for frequently accessed elements can significantly improve speed, regardless of the selector method used.

4. **Modern Frameworks**: Some modern JavaScript frameworks (like React, Vue, etc.) manage the DOM more efficiently through Virtual DOMs, which may alleviate performance concerns related to selector types.

In summary, this benchmark reveals how different CSS selector strategies impact the performance of element selection in JavaScript. The results emphasize the trade-offs between performance, code clarity, and maintainability, which should be taken into account when designing applications.

Related benchmarks:

DataAttribute vs Class Selector vs ID Selector vs Tag vs :is() (version: 1)

Comparing performance of: Class vs ID vs data attribute vs :is(div, span) vs Tag

Created: 3 months ago by: Guest

Jump to the latest result

Class

ID

data attribute

:is(div, span)

Tag

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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