Benchmark: querySelectorAll data vs class vs getElementsByClassName

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 - querySelectorAll
var test = document.querySelectorAll('[data-attribute="test"]');
class name - querySelectorAll
var test = document.querySelectorAll('.test');
class name - getElementsByClassName
var test = document.getElementsByClassName('test');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
data attribute - querySelectorAll
class name - querySelectorAll
class name - getElementsByClassName

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

MeasureThat.net is testing the performance differences between three methods for selecting elements from an HTML document:

1. `querySelectorAll` with a data attribute (`data-attribute="test"`)
2. `querySelectorAll` with a class name (`class="test"`) using square brackets instead of dot notation
3. `getElementsByClassName` with a class name (`class="test"`)

**Options compared**

The three options are:

1. **`querySelectorAll` with data attribute**: This method selects elements based on the presence of a specific data attribute in the element's attributes.
2. **`querySelectorAll` with class name (square brackets)**: This method selects elements based on the presence of a specific class name in the element's classes.
3. **`getElementsByClassName` with class name**: This method is older and more traditional, selecting elements based on the presence of a specific class name in the element's classes.

**Pros and Cons**

1. **`querySelectorAll` with data attribute**:
	* Pros: More flexible and powerful than `getElementsByClassName`, as it can select elements based on any attribute.
	* Cons: May be slower for large datasets, as the browser needs to iterate through all attributes to find a match.
2. **`querySelectorAll` with class name (square brackets)**:
	* Pros: Faster than `getElementsByClassName`, as it uses a more optimized algorithm for class name lookups.
	* Cons: Less flexible and powerful than using data attributes, as only classes are considered.
3. **`getElementsByClassName` with class name**:
	* Pros: Simple and easy to use, but less efficient than `querySelectorAll` methods.
	* Cons: Can be slower for large datasets, as it needs to iterate through all elements in the document.

**Library usage**

In this benchmark, none of the libraries are explicitly mentioned. However, it's worth noting that `getElementsByClassName` is a method provided by the W3C DOM API, while `querySelectorAll` and its square bracket variant are part of the HTML5 specification.

**Special JS features or syntax**

There are no special JavaScript features or syntax used in this benchmark beyond what's typically available in modern browsers. However, it's worth noting that some older browsers may not support all of these methods or may have different implementations for them.

**Alternatives**

Other alternatives for selecting elements from an HTML document include:

* `querySelector`: Similar to `querySelectorAll`, but returns a single element instead of a NodeList.
* `getElementsByTagName`: Returns a list of elements with the specified tag name.
* CSS selectors: Can be used to select elements based on various criteria, such as class names, IDs, or attributes.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to `querySelectorAll` methods.

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/102.0.5005.63 Safari/537.36

Browser/OS: Chrome 102 on Windows

View result in a separate tab

Test name	Executions per second
data attribute - querySelectorAll	521710.5 Ops/sec
class name - querySelectorAll	708183.9 Ops/sec
class name - getElementsByClassName	3018569.8 Ops/sec

Related benchmarks:

querySelectorAll data vs class vs getElementsByClassName (version: 0)

Comparing performance of: data attribute - querySelectorAll vs class name - querySelectorAll vs class name - getElementsByClassName

Created: 2 years ago by: Guest

Jump to the latest result

data attribute - querySelectorAll

class name - querySelectorAll

class name - getElementsByClassName

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):