Benchmark: DataAttribute vs Class Selector vs ID Selector v2

HTML Preparation code:

<div class="hello" id="hello" data-hello="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 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

Test name	Executions per second
Class	9115264.0 Ops/sec
ID	6051660.5 Ops/sec
data attribute	5668760.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Purpose**

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

1. **Class Selector**: Using `document.querySelector('.hello')` to select elements with the class `hello`.
2. **ID Selector**: Using `document.querySelector('#hello')` to select elements with the ID `hello`.
3. **Data Attribute**: Using `document.querySelector('[data-hello]')` to select elements that have a custom attribute `data-hello` set.

**Options Compared**

The benchmark compares the execution times of these three approaches on the same HTML document with an element containing the class, ID, and data attribute `hello`.

**Pros and Cons of Each Approach**

1. **Class Selector**
	* Pros: Fast and efficient, as elements with the same class can be cached in a single DOM object.
	* Cons: May not work if the class name is dynamic or generated on the fly.
2. **ID Selector**
	* Pros: Simple and straightforward, as each element has a unique ID.
	* Cons: May be slower due to the need to look up the element's index in the DOM tree.
3. **Data Attribute**
	* Pros: Flexible and easy to use, as custom attributes can be added dynamically.
	* Cons: May not work if the attribute name is not unique or is generated on the fly.

**Library Used**

In this benchmark, no specific library is used beyond the built-in JavaScript DOM API.

**Special JS Features/Syntax**

None are mentioned in this benchmark.

**Other Considerations**

The benchmark only measures the execution time of each approach and does not consider other factors like memory usage or CPU overhead.

**Alternatives**

If you're looking for alternative approaches to select HTML elements, some common ones include:

1. **CSS Selectors**: Using CSS selectors like `*` (all elements), `.` (elements with a class), or `[attribute]` (elements with a custom attribute).
2. **QuerySelectorAll()**: Using the `querySelectorAll()` method to select multiple elements that match a CSS selector.
3. **Element.prototype.matches()**: Using the `matches()` method to check if an element matches a CSS selector.

These alternatives may have different performance characteristics and use cases, depending on the specific requirements of your project.

Related benchmarks:

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

Comparing performance of: Class vs ID vs data attribute

Created: 2 years ago by: Guest

Jump to the latest result

Class

ID

data attribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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