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

Historical Performance Data aggregated from 50 community runs

Desktop Results:

Chrome 39 runs

class name

1.7M/s

data attribute

1.4M/s

class name with data attribute

758K/s

Fastest: class name (2.2x faster)

View exact numbers

✓ class name: 1,701,990 ops/sec
• data attribute: 1,388,590 ops/sec
• class name with data attribute: 757,907 ops/sec

Firefox 11 runs

class name

973K/s

data attribute

646K/s

class name with data attribute

511K/s

Fastest: class name (1.9x faster)

View exact numbers

✓ class name: 972,639 ops/sec
• data attribute: 645,948 ops/sec
• class name with data attribute: 511,254 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
class name with data attribute

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 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

class name

2.5M/s

data attribute

1.9M/s

class name with data attribute

925K/s

View exact numbers

Test name	Executions per second
✓ class name	2,480,232 Ops/sec
data attribute	1,904,489 Ops/sec
class name with data attribute	925,340 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.

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

Go to the latest result

data attribute

class name

class name with data attribute

Historical Performance Data aggregated from 50 community runs

Desktop Results:

Chrome 39 runs

Firefox 11 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 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

Go to the latest result

data attribute

class name

class name with data attribute

Historical Performance Data aggregated from 50 community runs

Desktop Results:

Chrome 39 runs

Firefox 11 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 vs class name with data attribute`