Benchmark: className vs data attr querySelectorAll vs getElementsByClassName

className vs data attr querySelectorAll vs getElementsByClassName (version: 0)

This benchmark compares the performance of different methods for selecting elements in JavaScript: querySelectorAll and getElementsByClassName.

Comparing performance of: querySelectorAll data attr vs querySelectorAll data attr plus node name vs querySelectorAll class name vs querySelectorAll class name plus node name vs querySelectorAll node name plus class name plus data attr vs getElementsByClassName

Created: 4 months ago by: Guest

Jump to the latest result

HTML Preparation code:

<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>
<div class="component-1" data-js="component-1"></div>

<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>
<div class="component-2" data-js="component-2"></div>

Tests:

querySelectorAll data attr
var result = document.querySelectorAll("[data-js='component-1']");
querySelectorAll data attr plus node name
var result = document.querySelectorAll("div[data-js='component-1']");
querySelectorAll class name
var result = document.querySelectorAll('.component-1')
querySelectorAll class name plus node name
var result = document.querySelectorAll('div.component-1');
querySelectorAll node name plus class name plus data attr
var result = document.querySelectorAll("div.component-1[data-js='component-1']");
getElementsByClassName
document.getElementsByClassName('component-1')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll data attr
querySelectorAll data attr plus node name
querySelectorAll class name
querySelectorAll class name plus node name
querySelectorAll node name plus class name plus data attr
getElementsByClassName

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Purpose**

The benchmark compares the performance of different methods for selecting elements in JavaScript:

1. `querySelectorAll`
2. `getElementsByClassName`

These two methods are used to retrieve DOM elements based on various selectors, such as attribute values (`data-js`), class names, or element names.

**Test Cases**

There are six test cases, each representing a specific scenario:

1. `querySelectorAll data attr`: Retrieves elements with the `data-js` attribute set to `'component-1'`.
2. `querySelectorAll data attr plus node name`: Retrieves elements with both the `data-js` attribute and the `node name` (i.e., `div`) specified.
3. `querySelectorAll class name`: Retrieves elements with the class name `component-1`.
4. `querySelectorAll class name plus node name`: Retrieves elements with both the class name `component-1` and the element name `div`.
5. `querySelectorAll node name plus class name plus data attr`: Retrieves elements with all three selectors: `node name`, class name, and attribute value.
6. `getElementsByClassName`: Retrieves elements with the exact class name `component-1`.

**Benchmark Results**

The latest benchmark results show that:

* `getElementsByClassName` is the fastest method, executing approximately 738,339 executions per second on average across all runs.
* `querySelectorAll data attr plus node name` and `querySelectorAll class name` are relatively fast, executing around 826,807 and 655,400 executions per second, respectively.

The other test cases have slower execution rates, likely due to the increased complexity of their selectors.

**Observations**

* The results suggest that `getElementsByClassName` is generally faster than `querySelectorAll`, possibly because it doesn't require iterating over all elements in the document and filtering based on the selector.
* The performance of `querySelectorAll` varies depending on the specific scenario. In some cases (e.g., `queryString data attr`), it's relatively fast, while in others (e.g., `node name plus class name plus data attr`), it's slower.

These observations highlight the importance of understanding the nuances of each method and how they interact with different selectors and use cases.

Latest run results:

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

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll data attr	1135986.5 Ops/sec
querySelectorAll data attr plus node name	543207.8 Ops/sec
querySelectorAll class name	1347921.9 Ops/sec
querySelectorAll class name plus node name	826807.2 Ops/sec
querySelectorAll node name plus class name plus data attr	655400.1 Ops/sec
getElementsByClassName	7383390.5 Ops/sec

Related benchmarks:

className vs data attr querySelectorAll vs getElementsByClassName (version: 0)

This benchmark compares the performance of different methods for selecting elements in JavaScript: querySelectorAll and getElementsByClassName.

Comparing performance of: querySelectorAll data attr vs querySelectorAll data attr plus node name vs querySelectorAll class name vs querySelectorAll class name plus node name vs querySelectorAll node name plus class name plus data attr vs getElementsByClassName

Created: 4 months ago by: Guest

Jump to the latest result

querySelectorAll data attr

querySelectorAll data attr plus node name

querySelectorAll class name

querySelectorAll class name plus node name

querySelectorAll node name plus class name plus data attr

getElementsByClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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