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: 2 years ago by: Guest

Go 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')

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

getElementsByClassName

9.3M/s

querySelectorAll class name

1.8M/s

querySelectorAll data attr

1.6M/s

querySelectorAll class name plus node name

1.2M/s

querySelectorAll node name plus class name plus data attr

913K/s

querySelectorAll data attr plus node name

795K/s

Fastest: getElementsByClassName (11.8x faster)

View exact numbers

✓ getElementsByClassName: 9,348,268 ops/sec
• querySelectorAll class name: 1,834,326 ops/sec
• querySelectorAll data attr: 1,585,226 ops/sec
• querySelectorAll class name plus node name: 1,185,484 ops/sec
• querySelectorAll node name plus class name plus data attr: 913,443 ops/sec
• querySelectorAll data attr plus node name: 795,173 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
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

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

getElementsByClassName

7.4M/s

querySelectorAll class name

1.3M/s

querySelectorAll data attr

1.1M/s

querySelectorAll class name plus node name

827K/s

querySelectorAll node name plus class name plus data attr

655K/s

querySelectorAll data attr plus node name

543K/s

View exact numbers

Test name	Executions per second
✓ getElementsByClassName	7,383,390 Ops/sec
querySelectorAll class name	1,347,922 Ops/sec
querySelectorAll data attr	1,135,986 Ops/sec
querySelectorAll class name plus node name	826,807 Ops/sec
querySelectorAll node name plus class name plus data attr	655,400 Ops/sec
querySelectorAll data attr plus node name	543,208 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 2 years ago by: Guest

Go 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

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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: `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`