Benchmark: DataAttribute vs Class Selector vs ID Selector (extended)

HTML Preparation code:

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

Tests:

class
document.querySelector('.hello');
ID
document.querySelector('#hello');
data-attribute
document.querySelector('[data-hello]');
data-attribute partial
document.querySelectorAll('[data-test~="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 partial
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

class

6.5M/s

4.7M/s

data-attribute

4.1M/s

data-attribute exact

2.1M/s

data-attribute partial

2.0M/s

View exact numbers

Test name	Executions per second
✓ class	6,505,100 Ops/sec
ID	4,700,824 Ops/sec
data-attribute	4,127,105 Ops/sec
data-attribute exact	2,051,577 Ops/sec
data-attribute partial	2,014,255 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmark test case, which compares the performance of different approaches to select elements from a DOM document.

**Options being compared**

Four options are being tested:

1. **Class Selector**: Using `document.querySelector('.hello')` to select an element by its class attribute.
2. **ID Selector**: Using `document.querySelector('#hello')` to select an element by its ID attribute.
3. **Data-Attribute**: Using `[data-hello]` to select elements based on a data attribute (`data-hello`) set in the HTML document.
4. **Data-Attribute Partial and Exact**: Using `[data-test~="hello"]` (partial) and `[data-test="hello-and-bye"]` (exact) to select elements with matching values for specific data attributes.

**Pros and Cons of each approach**

1. **Class Selector**: This method is fast because classes are cached in the browser's cache. However, it can be slow if there are many class selectors on the same element or if there are a lot of elements to select.
2. **ID Selector**: Using IDs is generally slower than using classes or data-attributes. IDs must be unique, which can lead to slower performance when dealing with multiple elements that have the same ID.
3. **Data-Attribute**:
	* Pros: Fast and efficient way to access specific attributes on elements without requiring explicit class names.
	* Cons: Requires careful attribute naming conventions and may not work well if there are many competing attributes.
4. **Data-Attribute Partial and Exact**: These methods offer a balance between the partial and exact matching. The partial method is faster than exact, but may return more results.

**Other considerations**

* DOM manipulation: Selecting elements and setting styles can be expensive operations. Optimizing these steps in your benchmark will improve performance.
* Browser support: Each browser has its own implementation of CSS selectors and data attributes, which may affect the outcome of this test.
* Cache size: Larger cache sizes (e.g., for `document.querySelector('.hello')`) can lead to better performance.

**Library usage**

In this case, there is no specific library used in the benchmark. However, JavaScript engines like V8 (used by Chrome) have built-in support for CSS selectors and data attributes.

**Special JS features or syntax**

This test does not use any special JavaScript features or syntax beyond standard CSS selectors and data attributes.

DataAttribute vs Class Selector vs ID Selector (extended) (version: 0) Benchmark.js

Comparing performance of: `class vs ID vs data-attribute vs data-attribute partial vs data-attribute exact`

Created: 5 years ago by: Guest

Go to the latest result

class

ID

data-attribute

data-attribute partial

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

DataAttribute vs Class Selector vs ID Selector (extended) (version: 0) Benchmark.js

Comparing performance of: class vs ID vs data-attribute vs data-attribute partial vs data-attribute exact

Created: 5 years ago by: Guest

Go to the latest result

class

ID

data-attribute

data-attribute partial

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 partial vs data-attribute exact`