Benchmark: querySelectorAll hover data attribute vs class name

HTML Preparation code:

<div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
  <div class="hover" data-hover></div>
</div>

Tests:

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

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: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Linux

View result in a separate tab

Test name	Executions per second
data attribute	258505.1 Ops/sec
class name	486699.1 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 world of MeasureThat.net and understand what's being tested in this benchmark.

**Benchmark Overview**

The benchmark is designed to compare the performance of two approaches for selecting elements from an HTML document:

1. **Data Attribute**: Using the `data-hover` attribute to select elements.
2. **Class Name**: Using the `.hover` class name to select elements.

**Options Compared**

In this benchmark, we have two options being compared:

* Data Attribute (`[data-hover]`)
* Class Name (`.hover`)

These two approaches differ in how they identify and select elements from the HTML document.

**Pros and Cons of Each Approach**

1. **Data Attribute**:
	* Pros: Can be more flexible and versatile, especially when working with data-rich web pages.
	* Cons: May not work as expected if the attribute is not present or has a different value for each element.
2. **Class Name**:
	* Pros: Reliable and efficient, especially when using a consistent class name across elements.
	* Cons: Less flexible than using attributes, and may require more maintenance.

**Library Usage**

In this benchmark, none of the test cases use any external libraries or frameworks that would affect the performance comparison.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax being used in this benchmark. The code is straightforward and focuses on comparing two simple selection approaches.

**Other Alternatives**

If you were to explore alternative approaches for selecting elements, some other options might include:

* **ID Attribute**: Using the `id` attribute to select elements.
* **Tag Name**: Using a specific tag name (e.g., `<div>`) to select elements.
* **CSS Selectors**: Using CSS selectors to select elements.

However, these alternatives are not being tested in this benchmark, as the focus is specifically on comparing the performance of data attributes and class names.

Related benchmarks:

querySelectorAll hover data attribute vs class name (version: 0)

Comparing performance of: data attribute vs class name

Created: 2 years ago by: Guest

Jump to the latest result

data attribute

class name

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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