Benchmark: DataAttribute vs Class Selector vs ID 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]');

Historical Performance Data aggregated from 126 community runs

Desktop Results:

Chrome 67 runs

Class

8.3M/s

5.8M/s

data attribute

5.2M/s

Fastest: Class (1.6x faster)

View exact numbers

✓ Class: 8,272,336 ops/sec
• ID: 5,827,703 ops/sec
• data attribute: 5,221,440 ops/sec

Firefox 20 runs

3.9M/s

Class

3.9M/s

data attribute

3.3M/s

Fastest: ID (1.2x faster)

View exact numbers

✓ ID: 3,949,456 ops/sec
• Class: 3,942,976 ops/sec
• data attribute: 3,326,852 ops/sec

Safari 7 runs

Class

8.6M/s

7.9M/s

data attribute

7.5M/s

Fastest: Class (1.1x faster)

View exact numbers

✓ Class: 8,631,470 ops/sec
• ID: 7,910,502 ops/sec
• data attribute: 7,548,686 ops/sec

Other 7 runs

Class

4.4M/s

3.0M/s

data attribute

2.8M/s

Fastest: Class (1.6x faster)

View exact numbers

✓ Class: 4,433,482 ops/sec
• ID: 3,020,541 ops/sec
• data attribute: 2,770,717 ops/sec

Mobile Results:

Chrome 17 runs

Class

6.2M/s

5.1M/s

data attribute

5.1M/s

Fastest: Class (1.2x faster)

View exact numbers

✓ Class: 6,173,067 ops/sec
• ID: 5,129,163 ops/sec
• data attribute: 5,082,801 ops/sec

Safari 8 runs

Class

6.5M/s

data attribute

6.3M/s

6.0M/s

View exact numbers

✓ Class: 6,489,701 ops/sec
• data attribute: 6,251,073 ops/sec
• ID: 6,039,934 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class
ID
data attribute

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 142 on Linux

View result in a separate tab

Class

21.3M/s

11.1M/s

data attribute

10.7M/s

View exact numbers

Test name	Executions per second
✓ Class	21,317,442 Ops/sec
ID	11,073,403 Ops/sec
data attribute	10,652,160 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 Definition**

The benchmark is designed to compare the performance of three different approaches to select an element in HTML:

1. **Class selector**: Using `document.querySelector('.hello');`
2. **ID selector**: Using `document.querySelector('#hello');`
3. **Data attribute**: Using `document.querySelector('[data-hello]');`

**Options Compared**

The benchmark is comparing the performance of these three approaches on a specific HTML element with a class, ID, and data attribute set.

**Pros and Cons of Each Approach**

1. **Class selector**
	* Pros: Fast and efficient, as it only requires a single CSS selector.
	* Cons: May not be as selective as other methods, as it will match all elements with the same class name.
2. **ID selector**
	* Pros: Highly selective, as it will only match the element with the exact specified ID.
	* Cons: Slower than class selectors, as it requires a more complex CSS selector.
3. **Data attribute**
	* Pros: Fast and efficient, similar to class selectors, but can be more specific depending on how attributes are named.
	* Cons: May not work in older browsers that don't support attribute selectors.

**Library and Purpose**

There is no external library being used in this benchmark, as it only relies on the built-in JavaScript DOM API.

**Special JS Features or Syntax**

None mentioned, as all the approaches rely on standard JavaScript features.

**Other Alternatives**

If you need to select elements in HTML, other alternatives include:

1. `document.querySelector()` with a CSS selector (e.g., `document.querySelector('.hello')`)
2. `document.getElementById()` for IDs (e.g., `document.getElementById('hello')`)
3. `document.getAttribute()` and `setAttribute()` for attribute-based selection

**Benchmark Preparation Code**

The provided HTML preparation code creates an element with a class, ID, and data attribute set:
```html
<div class="hello" id="hello" data-hello>Hello</div>
```
This allows the benchmark to test each approach on this specific element.

I hope this explanation helps you understand what's being tested in this JavaScript microbenchmark!

DataAttribute vs Class Selector vs ID Selector (version: 0)

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

Created: 9 years ago by: Guest

Go to the latest result

Class

ID

data attribute

Historical Performance Data aggregated from 126 community runs

Desktop Results:

Chrome 67 runs

Firefox 20 runs

Safari 7 runs

Other 7 runs

Mobile Results:

Chrome 17 runs

Safari 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

DataAttribute vs Class Selector vs ID Selector (version: 0)

Comparing performance of: Class vs ID vs data attribute

Created: 9 years ago by: Guest

Go to the latest result

Class

ID

data attribute

Historical Performance Data aggregated from 126 community runs

Desktop Results:

Chrome 67 runs

Firefox 20 runs

Safari 7 runs

Other 7 runs

Mobile Results:

Chrome 17 runs

Safari 8 runs

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`