Benchmark: querySelectorAll data attribute vs class name

HTML Preparation code:

<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>

Tests:

data attribute
var test = document.querySelectorAll('[data-attribute="test"]');
class name
var test = document.querySelectorAll('.test');

Historical Performance Data aggregated from 61 community runs

Desktop Results:

Chrome 47 runs

class name

1.7M/s

data attribute

1.3M/s

Fastest: class name (1.4x faster)

View exact numbers

✓ class name: 1,725,456 ops/sec
• data attribute: 1,252,092 ops/sec

Firefox 14 runs

class name

833K/s

data attribute

644K/s

Fastest: class name (1.3x faster)

View exact numbers

✓ class name: 833,269 ops/sec
• data attribute: 644,427 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
data attribute
class name

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

class name

2.9M/s

data attribute

2.5M/s

View exact numbers

Test name	Executions per second
✓ class name	2,852,035 Ops/sec
data attribute	2,462,522 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 provided benchmark and its components.

**Benchmark Overview**

The MeasureThat.net website allows users to create and run JavaScript microbenchmarks, which is exactly what we're looking at here. The goal of this benchmark is to compare the performance of two different approaches for querying HTML elements: using a `data-attribute` versus using a `class name`.

**Benchmark Preparation Code**

The provided `Html Preparation Code` creates an HTML page with 10 identical elements, each with a `class` attribute set to `"test"` and a `data-attribute` attribute set to `"test"`. This setup allows us to compare the performance of both approaches on the same dataset.

**Individual Test Cases**

There are two test cases:

1. **Data Attribute**: The first test case uses the `querySelectorAll` method with a CSS selector that targets elements with the `data-attribute` attribute set to `"test"`. This approach allows us to query elements based on a custom attribute.
2. **Class Name**: The second test case uses the `querySelectorAll` method with a CSS selector that targets elements with the `class` attribute set to `"test"`. This approach allows us to query elements based on their class name.

**Options Compared**

The two options being compared are:

* Using a `data-attribute` (the first test case)
* Using a `class name` (the second test case)

**Pros and Cons of Each Approach**

**Data Attribute:**

Pros:

* Allows for more flexibility in querying elements, as custom attributes can be used.
* Can be useful when you need to target specific elements based on arbitrary data.

Cons:

* May not be supported by all browsers or versions.
* Can lead to slower performance if the attribute is complex or nested.

**Class Name:**

Pros:

* Widely supported across different browsers and versions.
* Generally faster than using custom attributes.
* Can be useful when you need to target elements based on a pre-defined class name.

Cons:

* Less flexible than using custom attributes.
* May not work well with non-standard HTML or CSS.

**Library Used (if applicable)**

There is no explicit library mentioned in the benchmark, but `querySelectorAll` is a built-in method of the `document` object in JavaScript. However, if you were to use a third-party library for DOM manipulation, it's possible that the results might be affected.

**Special JS Feature or Syntax (if applicable)**

There are no special features or syntax mentioned in the benchmark. The code uses standard JavaScript and CSS selectors.

**Other Alternatives**

If you need to compare the performance of other approaches, such as:

* Using `getElementByID` instead of `querySelectorAll`
* Using a library like jQuery for DOM manipulation
* Using a more advanced CSS selector, like attribute value equal

Keep in mind that MeasureThat.net is focused on comparing microbenchmarks for simple use cases. More complex scenarios might require additional considerations or modifications to the benchmark.

querySelectorAll data attribute vs class name (version: 0)

Comparing performance of: `data attribute vs class name`

Created: 6 years ago by: Guest

Go to the latest result

data attribute

class name

Historical Performance Data aggregated from 61 community runs

Desktop Results:

Chrome 47 runs

Firefox 14 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

querySelectorAll data attribute vs class name (version: 0)

Comparing performance of: data attribute vs class name

Created: 6 years ago by: Guest

Go to the latest result

data attribute

class name

Historical Performance Data aggregated from 61 community runs

Desktop Results:

Chrome 47 runs

Firefox 14 runs

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: `data attribute vs class name`