Benchmark: querySelectorAll data attribute vs class name vs combined

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"]');

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

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

Browser/OS: Yandex Browser 25 on Windows

View result in a separate tab

Test name	Executions per second
data attribute	1904489.4 Ops/sec
class name	2480231.5 Ops/sec
class name with data attribute	925340.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a platform where users can create and run JavaScript microbenchmarks to compare the performance of different approaches. The provided benchmark definition and test cases are designed to measure the performance difference between using data attributes, class names, and combining both in the `querySelectorAll` method.

**Test Cases**

The benchmark consists of three individual test cases:

1. **Data Attribute**: The first test case uses the `data-attribute` attribute to query elements.
	* Benchmark Definition: `var test = document.querySelectorAll('[data-attribute="test"]');`
2. **Class Name**: The second test case uses a class name (`test`) to query elements.
	* Benchmark Definition: `var test = document.querySelectorAll('.test');`
3. **Class Name with Data Attribute**: The third test case combines both class names and data attributes to query elements.
	* Benchmark Definition: `var test = document.querySelectorAll('.test[data-attribute="test"]');`

**Options Compared**

The benchmark compares the performance of three different approaches:

1. Using a single attribute (`data-attribute`) in the `querySelectorAll` method.
2. Using a class name (`test`) in the `querySelectorAll` method.
3. Combining both class names and data attributes in the `querySelectorAll` method.

**Pros and Cons of Each Approach**

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

1. **Data Attribute**: This approach is simple and easy to read, but it may not be as efficient as other methods since it requires parsing the attribute value.
	* Pros: Easy to use, readable
	* Cons: May be less efficient than other methods
2. **Class Name**: Using a class name can be more efficient than using an attribute since it doesn't require parsing or comparing values.
	* Pros: More efficient, easier to maintain
	* Cons: Less readable than attribute-based queries
3. **Class Name with Data Attribute**: This approach combines the benefits of both methods, but may still incur additional overhead due to attribute parsing.
	* Pros: Balances readability and performance
	* Cons: May be slightly less efficient than using a single class name

**Library and Purpose**

The `querySelectorAll` method is part of the DOM API in JavaScript. It's used to select multiple elements that match a specified selector.

**Special JS Feature or Syntax (Not Applicable)**

There are no special features or syntaxes being tested in this benchmark.

**Alternative Approaches**

Other approaches for querying elements in JavaScript include:

1. `getElementsByClassName`: This method is similar to `querySelectorAll`, but it only returns elements with the specified class name.
2. Using regex patterns: Regular expressions can be used to match specific patterns in element attributes or content.
3. Using CSS selectors: CSS selectors can be used to select elements based on their style or layout.

Keep in mind that these alternative approaches may have different performance characteristics and use cases compared to the `querySelectorAll` method.

Related benchmarks:

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

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

Created: 4 years ago by: Registered User

Jump to the latest result

data attribute

class name

class name with 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):