Benchmark: DataAttribute vs Class Selector vs ID GetById

HTML Preparation code:

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

Tests:

Class
document.querySelector('.hello');
ID
document.getElementById('#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: 6 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
Class	8143737.5 Ops/sec
ID	21426508.0 Ops/sec
data attribute	3663576.2 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 benchmark and its test cases.

**Benchmark Definition**

The benchmark measures the performance of different approaches to select an HTML element: by class, by ID, or by data attribute. The benchmark uses JavaScript to query the elements in question and reports the number of executions per second.

**Test Cases**

There are three test cases:

1. **Class**: `document.querySelector('.hello');`
This test case queries the element with the class "hello" using a class selector.
2. **ID**: `document.getElementById('#hello');`
This test case queries the element with the ID "hello" using an ID selector.
3. **Data Attribute**: `document.querySelector('[data-hello]');`
This test case queries the element with a data attribute named "hello" using a attribute selector.

**Approaches Compared**

The benchmark compares three approaches:

1. **Class Selector**: Uses the class attribute to select elements.
2. **ID Selector**: Uses the ID attribute to select elements.
3. **Data Attribute Selector**: Uses an attribute selector with a custom data attribute (in this case, "hello").

**Pros and Cons of Each Approach**

* **Class Selector**:
	+ Pros: Fast and widely supported; works well for multiple classes on an element.
	+ Cons: Can be slower than ID selectors if the CSS selector is complex.
* **ID Selector**:
	+ Pros: Fast and reliable; works well for single elements with a unique ID.
	+ Cons: May not work if the ID is not present or is duplicated.
* **Data Attribute Selector**:
	+ Pros: Flexible and customizable; can be used to select multiple elements with different data attributes.
	+ Cons: May be slower than class or ID selectors due to the attribute selector's complexity.

**Library**

None of the test cases use a library, as they are built-in JavaScript functions (`document.querySelector()`).

**Special JS Features or Syntax**

The benchmark uses the following feature:

* **Template Literals**: The `Html Preparation Code` contains template literals (the string with the `\t` character), which are supported in modern JavaScript engines.

**Other Alternatives**

If you want to write a similar benchmark, you can use other approaches such as:

1. Using `document.querySelectorAll()` instead of `querySelectorAll()`.
2. Comparing different CSS selector syntaxes or pseudo-classes.
3. Measuring the performance of different DOM traversal methods (e.g., `parentNode`, `children`, etc.).

When creating your own benchmark, make sure to consider factors such as:

* The target browser and version range.
* The type and distribution of test data.
* The number of test cases and iterations.
* The reporting format and output.

Keep in mind that measuring performance can be complex and nuanced; it's essential to carefully design your benchmark to ensure accurate and reliable results.

Related benchmarks:

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

Comparing performance of: Class vs ID vs data attribute

Created: one year 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):