Benchmark: Class Selector vs ID Selector vs Data Attribute Selector Performance Test

HTML Preparation code:

<div class="hello" id="hello" data-hello="some long long long long value" data-test="hello-and-bye">Hello</div>	>Hello</div>

Tests:

Class
document.querySelector('.hello');
ID
document.querySelector('#hello');
Data Attribute
document.querySelector('[data-hello]');
Data Attribute Exact
document.querySelectorAll('[data-test="hello-and-bye"]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class
ID
Data Attribute
Data Attribute Exact

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Class

4.3M/s

3.0M/s

Data Attribute

2.9M/s

Data Attribute Exact

2.0M/s

View exact numbers

Test name	Executions per second
✓ Class	4,274,054 Ops/sec
ID	2,973,556 Ops/sec
Data Attribute	2,866,224 Ops/sec
Data Attribute Exact	2,018,065 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to selecting elements in an HTML document using JavaScript:

1. Class Selector
2. ID Selector
3. Data Attribute Selector (with exact matching)
4. Data Attribute Selector (without exact matching)

**Approaches Compared**

Here's a brief overview of each approach and their pros and cons:

### 1. Class Selector

* **Description**: `document.querySelector('.hello');`
* **Pros**: Fast and efficient, as class selectors are cached by browsers.
* **Cons**: Can be slower for deeply nested or complex classes.

### 2. ID Selector

* **Description**: `document.querySelector('#hello');`
* **Pros**: Fast and efficient, as ID selectors are unique and easily lookable up.
* **Cons**: May not work if multiple elements have the same ID (although this is rare).

### 3. Data Attribute Selector (with exact matching)

* **Description**: `document.querySelector('[data-hello]');`
* **Pros**: Flexible and powerful, as it can match any attribute with a specific value.
* **Cons**: May be slower due to the need for attribute lookup.

### 4. Data Attribute Selector (without exact matching)

* **Description**: `document.querySelectorAll('[data-test="hello-and-bye"]')`
* **Pros**: Similar flexibility to the previous approach, but with less overhead.
* **Cons**: May still incur some performance cost due to attribute lookup.

**Library and Special Features**

None of the test cases use any external libraries or special JavaScript features. However, it's worth noting that using `document.querySelectorAll()` can return an array of matching elements, which might affect performance depending on the context.

**Device and Browser**

The benchmark is run on a Chrome browser with version 126, executed on a Linux desktop platform, and has an estimated 427M executions per second. The device platform and operating system are specified as well.

**Alternatives**

Other alternatives for selecting elements in JavaScript include:

* `document.getElementsByClassName()` (similar to class selector)
* `document.getElementById()` (similar to ID selector)
* Using CSS selectors with `getElementById()`, `getElementsByClassName()`, or `querySelectorAll()`

However, using pure JavaScript element selection methods can be less efficient and may incur more overhead compared to the approaches tested in this benchmark.

Keep in mind that these alternatives might not match the exact performance characteristics of the approaches being tested in this benchmark.

Class Selector vs ID Selector vs Data Attribute Selector Performance Test (version: 0)

Class Selector vs ID Selector vs Data Attribute Selector Performance Test

Comparing performance of: `Class vs ID vs Data Attribute vs Data Attribute Exact`

Created: 3 years ago by: Guest

Go to the latest result

Class

ID

Data Attribute

Data Attribute Exact

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Class Selector vs ID Selector vs Data Attribute Selector Performance Test (version: 0)

Class Selector vs ID Selector vs Data Attribute Selector Performance Test

Comparing performance of: Class vs ID vs Data Attribute vs Data Attribute Exact

Created: 3 years ago by: Guest

Go to the latest result

Class

ID

Data Attribute

Data Attribute Exact

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `Class vs ID vs Data Attribute vs Data Attribute Exact`