Benchmark: querySelectorAll data attribute vs class name vs custom HTML tag

HTML Preparation code:

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

Tests:

Data attribute
var test = document.querySelectorAll('[data-attribute="test"]');
Class name
var test = document.querySelectorAll('.test');
Custom HTML tag
var test = document.querySelectorAll('x-div');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Data attribute
Class name
Custom HTML tag

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Data attribute	2920224.0 Ops/sec
Class name	3414596.0 Ops/sec
Custom HTML tag	3518398.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark compares the performance of different methods of selecting DOM elements in JavaScript using the `document.querySelectorAll` function. The methods being tested are as follows:

1. **Data Attribute Selection**: 
   - Benchmark Definition: `var test = document.querySelectorAll('[data-attribute="test"];')`
   - This method selects DOM elements based on custom data attributes. In this case, it targets elements with the `data-attribute="test"` attribute.

2. **Class Name Selection**: 
   - Benchmark Definition: `var test = document.querySelectorAll('.test');`
   - This approach selects elements based on their CSS classes. Here, it selects all elements that have the class name "test".

3. **Custom HTML Tag Selection**: 
   - Benchmark Definition: `var test = document.querySelectorAll('x-div');`
   - This method selects elements based on their custom HTML tags. In this case, it targets `<x-div>` elements.

### Performance Results:
The results indicate the executions per second for each selection method on a specific browser version (Chrome 134) running on macOS. Here's a summary of the findings:

- **Custom HTML Tag**: 3,518,398.25 executions/second
- **Class Name**: 3,414,596.0 executions/second
- **Data Attribute**: 2,920,224.0 executions/second

### Pros and Cons of Each Approach:

1. **Data Attribute Selection**:
   - **Pros**: 
     - Very useful for selecting elements based on additional metadata.
     - Can improve code readability when leveraging specific data related to elements.
   - **Cons**: 
     - Slightly less performant compared to class name or custom tag selection, as seen in the benchmark results.
     - Overuse of data attributes can lead to convoluted markup.

2. **Class Name Selection**:
   - **Pros**:
     - Functional and widely used for CSS styling and JavaScript manipulation.
     - Offers good performance and clarity when grouped visually in CSS.
   - **Cons**: 
     - Class names can be reused across different elements, which may result in elements being selected unintentionally.

3. **Custom HTML Tag Selection**:
   - **Pros**:
     - Can provide semantic meaning and organization for custom elements, aligning well with web component standards.
     - Highest performance in this benchmark, indicating that browser engines may optimize these tags better.
   - **Cons**:
     - Potentially requires polyfills or additional handling in environments that do not fully support custom HTML elements.
     - Usage of custom tags can lead to confusion if not widely adopted or documented among team members.

### Other Alternatives:
In addition to `querySelectorAll`, alternatives for selecting DOM elements in JavaScript include:

- **getElementById**: For selecting elements by their unique ID.
- **getElementsByClassName**: For selecting elements by class name; however, it returns an "HTMLCollection" instead of a static NodeList like `querySelectorAll`.
- **getElementsByTagName**: For selecting elements by their HTML tag name.
- **Selecting with jQuery**: Using jQuery's `$(selector)` method provides powerful chaining and additional manipulation capabilities, though it introduces the overhead of including the jQuery library.
- **Using new frameworks**: Modern frameworks (like React, Vue, or Angular) often abstract DOM interactions and provide their mechanisms for component rendering, reducing the need for direct DOM queries.

### Considerations:
When choosing a method for selecting elements, factors like performance, readability, maintainability, and the specific use case should guide the decision. Each method has its trade-offs, and understanding the context in which they are used can help avoid performance pitfalls and ensure maintainable code.

Related benchmarks:

querySelectorAll data attribute vs class name vs custom HTML tag (version: 1)

Comparing performance of: Data attribute vs Class name vs Custom HTML tag

Created: one month ago by: Guest

Jump to the latest result

Data attribute

Class name

Custom HTML tag

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