Benchmark: DataAttribute vs Class Selector vs ID Selector / JQuery

HTML Preparation code:

<div class="hello" id="hello" data-hello>Hello</div>	
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

Class
$('.hello');
ID
$('#hello');
data attribute
$('[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

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The test compares the performance of three different approaches to select elements from an HTML document:

1. Class selector (`$('.hello')`)
2. ID selector (`$('#hello')`)
3. Data attribute selector (`('[data-hello]')`)

**Approach 1: Class Selector**

The class selector approach uses the `$` function provided by jQuery to select elements based on their `class` attribute. In this case, the test looks for an element with a `class` attribute equal to `"hello"`.

Pros:

* Easy to implement and understand
* Can be used to select multiple elements at once

Cons:

* May not be as efficient as other approaches if the class name is complex or contains many characters
* May not work well with older browsers that don't support CSS selectors

**Approach 2: ID Selector**

The ID selector approach uses the `$` function provided by jQuery to select an element based on its `id` attribute. In this case, the test looks for an element with an `id` attribute equal to `"hello"`.

Pros:

* Fast and efficient
* Works well even in older browsers that don't support CSS selectors

Cons:

* Requires a unique `id` attribute for each element
* May not be suitable if you need to select multiple elements based on different attributes

**Approach 3: Data Attribute Selector**

The data attribute selector approach uses the `$` function provided by jQuery to select an element based on its `data-hello` attribute. In this case, the test looks for an element with a `data-hello` attribute equal to `"hello"`.

Pros:

* Fast and efficient
* Works well even in older browsers that don't support CSS selectors

Cons:

* Requires a custom attribute (`data-hello`) on the HTML elements
* May not be suitable if you need to select multiple elements based on different attributes

**Library: jQuery**

The `$` function used in all three approaches is provided by jQuery, a popular JavaScript library. jQuery's `selector` functions allow developers to select elements from an HTML document using CSS selectors.

**Special JS Feature: None**

There are no special JavaScript features or syntax used in this benchmark.

**Other Alternatives**

If you prefer not to use jQuery, you can also use native JavaScript methods to select elements:

* Class selector: `document.querySelectorAll('.hello')`
* ID selector: `document.getElementById('hello')`
* Data attribute selector: `document.querySelector('[data-hello]')`

However, these approaches may be less efficient and more verbose than using the `$` function provided by jQuery.

**Benchmark Results**

The benchmark results show that:

* The ID selector approach is the fastest (805005 executions per second)
* The data attribute selector approach is slightly slower than the ID selector approach but faster than the class selector approach (399585 executions per second and 1665857.25 executions per second, respectively)
* The class selector approach is the slowest (1665857.25 executions per second)

Latest run results:

Run details: (Test run date: 9 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/130.0.6723.90 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 130 on iOS 18.1

View result in a separate tab

Test name	Executions per second
Class	2163873.8 Ops/sec
ID	4278410.5 Ops/sec
data attribute	1381483.2 Ops/sec

Related benchmarks:

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

Comparing performance of: Class vs ID vs data attribute

Created: 3 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 26 days ago):