Benchmark: DataAttribute vs Class Selector vs ID native Selector

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: 10 months ago)

User agent: Mozilla/5.0 (Android 12; Mobile; rv:140.0) Gecko/140.0 Firefox/140.0

Browser/OS: Firefox Mobile 140 on Android

View result in a separate tab

Test name	Executions per second
Class	2342711.8 Ops/sec
ID	3737868.0 Ops/sec
data attribute	2126969.5 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 microbenchmark test suite on the MeasureThat.net website. The benchmark compares the performance of three different methods to select an HTML element: `document.querySelector('.hello')`, `document.getElementById('hello')`, and `document.querySelector('[data-hello]')`. These methods are commonly used in web development to retrieve elements from the DOM.

**Methods Comparison**

The three methods being compared have different advantages and disadvantages:

1. **Class Selector (`document.querySelector('.hello')`)**:
	* Pros: Fast, efficient, and widely supported.
	* Cons: May not work if the class is dynamically added or removed.
	* Purpose: Selects an element by its class name.
2. **ID Native Selector (`document.getElementById('hello')`)**:
	* Pros: Fast and efficient, especially when combined with `querySelector`.
	* Cons: Limited to elements with a unique ID attribute.
	* Purpose: Selects an element by its ID attribute.
3. **Data Attribute Selector (`document.querySelector('[data-hello]')`)**:
	* Pros: Flexible and dynamic, can work even if the class or ID is dynamically added or removed.
	* Cons: May be slower than class or ID selectors due to attribute lookup.
	* Purpose: Selects an element by its data attribute.

**Library Usage**

In this benchmark, none of the methods rely on a specific library. However, the `querySelector` method uses the Web API's `querySelector()` function, which is part of the ECMAScript standard and supported by most modern browsers.

**Special JavaScript Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark. The code only uses basic DOM methods and standard JavaScript syntax.

**Other Alternatives**

If you need to select elements from a different HTML structure or with different attributes, you might consider alternative methods:

* `document.getElementsByClassName('hello')`: Selects an element by its class name using the `getElementsByClassName()` method.
* `document.querySelectorAll('.hello')`: Selects multiple elements by their class names using the `querySelectorAll()` method.
* `document.querySelector('[attribute="value"]')`: Selects an element by a specific attribute value.

Keep in mind that these alternatives might have different performance characteristics, and it's essential to test them in your specific use case.

**Benchmark Result Interpretation**

The latest benchmark result shows the execution rate per second for each method on a Chrome 90 browser running on a Mac OS X 10.15.7 device. The results indicate:

* ID Native Selector (`document.getElementById('hello')`) is the fastest, with an average of 4719036 executions per second.
* Data Attribute Selector (`document.querySelector('[data-hello]')`) is slower, with an average of 2542531 executions per second.
* Class Selector (`document.querySelector('.hello')`) is the slowest, with an average of 2083029 executions per second.

These results are specific to this benchmark and might vary depending on your use case and browser/OS combination.

Related benchmarks:

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

Comparing performance of: Class vs ID vs data attribute

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