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]');

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: 2 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 135 on Android

View result in a separate tab

Test name	Executions per second
Class	1901399.0 Ops/sec
ID	964958.9 Ops/sec
data attribute	771044.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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!

Related benchmarks:

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

Comparing performance of: Class vs ID vs data attribute

Created: 8 years ago by: Guest

Jump to the latest result

Class

ID

data attribute

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):