Benchmark: querySelectorAll data attribute vs class name vs combined vs element 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');
class name with data attribute
var test = document.querySelectorAll('.test[data-attribute="test"]');
using name
var test = document.querySelectorAll('div[data-attribute="test"]');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
data attribute
class name
class name with data attribute
using name

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark tests the performance of different methods for selecting elements in an HTML document using JavaScript's `querySelectorAll` method.

**Test Cases**

The benchmark consists of four test cases, each testing a different approach:

1. **Data Attribute**: Tests the performance of selecting elements based on their data attribute (`data-attribute="test"`).
2. **Class Name**: Tests the performance of selecting elements based on their class name (`class="test"`).
3. **Class Name with Data Attribute**: Tests the performance of selecting elements that have both a class name and a data attribute.
4. **Using Name**: Tests the performance of selecting elements using their name (in this case, `div`).

**Approaches Compared**

The benchmark compares the performance of these four approaches:

* **Data Attribute**: Selecting elements based on their data attribute (`data-attribute="test"`).
* **Class Name**: Selecting elements based on their class name (`class="test"`).
* **Class Name with Data Attribute**: Selecting elements that have both a class name and a data attribute.
* **Using Name**: Selecting elements using their name (in this case, `div`).

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Data Attribute**:
	+ Pros: allows for more flexible selection (e.g., selecting elements with specific data attributes).
	+ Cons: may be slower due to the need to parse the attribute value.
* **Class Name**:
	+ Pros: generally faster than using data attributes, as it's a simple string match.
	+ Cons: less flexible, as only class names are matched.
* **Class Name with Data Attribute**:
	+ Pros: combines the benefits of both approaches (flexibility and speed).
	+ Cons: may be slower due to the need to parse both the class name and data attribute.
* **Using Name**:
	+ Pros: generally fastest, as it's a simple string match.
	+ Cons: less flexible, as only element names are matched.

**Library Usage**

The benchmark uses the `document.querySelectorAll` method, which is a part of the DOM (Document Object Model) API. This library allows JavaScript to select elements in an HTML document using various criteria, such as class names, data attributes, and element names.

**Special JS Features or Syntax**

None of the test cases use any special JavaScript features or syntax beyond what's typically used for web development.

**Alternatives**

Other alternatives for selecting elements in an HTML document include:

* `document.querySelectorAll` with a CSS selector (e.g., `.test`, `[data-attribute="test"]`)
* `element.querySelectorAll` method on individual element objects
* Using libraries like jQuery or Sizzle, which provide additional selection methods

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the approaches tested in this benchmark.

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 101 on Windows

View result in a separate tab

Test name	Executions per second
data attribute	586666.7 Ops/sec
class name	938346.6 Ops/sec
class name with data attribute	543524.6 Ops/sec
using name	512669.4 Ops/sec

Related benchmarks:

querySelectorAll data attribute vs class name vs combined vs element name (version: 0)

Comparing performance of: data attribute vs class name vs class name with data attribute vs using name

Created: 2 years ago by: Guest

Jump to the latest result

data attribute

class name

class name with data attribute

using name

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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