Benchmark: querySelector vs Loop v5

querySelector vs Loop v5 (version: 0)

If you have a large number of elements, is it faster to use querySelectorAll, or to iterate over an array?

Comparing performance of: querySelectorAll with .class vs querySelectorAll with [attribute] vs filter with classList vs filter with className vs filter with getAttribute vs for with classList vs for with className vs for with getAttribute vs getElementsByClassName

Created: one year ago by: Guest

Jump to the latest result

HTML Preparation code:

<div id="testBody"></div>

Script Preparation code:

const elementCount = 100000;
const body = document.getElementById('testBody');

// Create a Bunch of DOM elements.
// Keep a refrence to all of them to test the other loops.
window.entities = [];
for (let i=0; i < elementCount; i++) {
 let elm = document.createElement('div');
 elm.classList.add(`test-${i%4}`);
 elm.setAttribute(`test`, i%4);
 // Add to body for query selector tests.
 body.appendChild(elm);
 // Add to array for loop tests.
 window.entities.push(elm);
}

Tests:

querySelectorAll with .class
const randomID = 0|Math.random()*4; const result = window.testBody.querySelectorAll(`.test-${randomID}`);
querySelectorAll with [attribute]
const randomID = 0|Math.random()*4; const result = window.testBody.querySelectorAll(`[test="${randomID}"]`);
filter with classList
const randomID = 0|Math.random()*4; const result = window.entities.filter(elm => elm.classList.contains(`test-${randomID}`))
filter with className
const randomID = 0|Math.random()*4; const result = window.entities.filter(elm => elm.className === `test-${randomID}`)
filter with getAttribute
const randomID = 0|Math.random()*4; const result = window.entities.filter(elm => elm.getAttribute('test') === `${randomID}`)
for with classList
const randomID = 0|Math.random()*4; const result = []; const length = window.entities.length; for (let i=0; i < length; i++) { const elm = window.entities[i]; if (elm.classList.contains(`test-${randomID}`)) { result.push(elm); } }
for with className
const randomID = 0|Math.random()*4; const result = []; const length = window.entities.length; for (let i=0; i < length; i++) { const elm = window.entities[i]; if (elm.className === `test-${randomID}`) { result.push(elm); } }
for with getAttribute
const randomID = 0|Math.random()*4; const result = []; const length = window.entities.length; for (let i=0; i < length; i++) { const elm = window.entities[i]; if (elm.getAttribute('test') === `${randomID}`) { result.push(elm); } }
getElementsByClassName
const randomID = 0|Math.random()*4; const result = window.testBody.getElementsByClassName(`test-${randomID}`);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll with .class
querySelectorAll with [attribute]
filter with classList
filter with className
filter with getAttribute
for with classList
for with className
for with getAttribute
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Browser/OS: Chrome 112 on Linux

View result in a separate tab

Test name	Executions per second
querySelectorAll with .class	706.7 Ops/sec
querySelectorAll with [attribute]	343.7 Ops/sec
filter with classList	78.2 Ops/sec
filter with className	144.8 Ops/sec
filter with getAttribute	162.9 Ops/sec
for with classList	49.4 Ops/sec
for with className	58.3 Ops/sec
for with getAttribute	57.6 Ops/sec
getElementsByClassName	1963431.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided JSON represents a benchmark test that compares the performance of six different approaches to select elements from an array and filter out elements based on class lists, attribute values, or other criteria. The test aims to determine which approach is faster for large datasets.

**Approaches Compared**

1. `querySelectorAll with .class`
2. `querySelectorAll with [attribute]`
3. `filter with getAttribute`
4. `filter with className`
5. `filter with classList`
6. `for` loops with `className`, `getAttribute`, and `classList`

Each approach is designed to demonstrate a specific method for selecting or filtering elements from the array.

**Performance Results**

The benchmark results show the number of executions per second (ExecutionsPerSecond) for each test on a Chrome 112 browser running on Linux. The fastest approach wins.

Here's a brief summary:

* `getElementsByClassName` is the clear winner, outperforming all other approaches by a significant margin.
* `filter with classList` and `for` loops with `classList` are relatively fast and close to each other in performance.
* `filter with getAttribute` and `filter with className` are slower but still efficient.
* `querySelectorAll with .class` and `querySelectorAll with [attribute]` are the slowest approaches, likely due to the overhead of using selectors.

**Insights and Recommendations**

Based on these results, here are some key takeaways:

* When working with large datasets, use `getElementsByClassName` or a similar method to select elements, as it tends to be faster.
* For filtering purposes, consider using `filter with classList` or `for` loops with `classList`, as they offer good performance and simplicity.
* Avoid using `querySelectorAll with .class` or `querySelectorAll with [attribute]` for filtering, as they are slower than other approaches.

Keep in mind that these results may vary depending on the specific use case, browser, and environment. Always benchmark your code to determine the most efficient approach for your particular requirements.

Related benchmarks:

querySelector vs Loop v5 (version: 0)

If you have a large number of elements, is it faster to use querySelectorAll, or to iterate over an array?

Comparing performance of: querySelectorAll with .class vs querySelectorAll with [attribute] vs filter with classList vs filter with className vs filter with getAttribute vs for with classList vs for with className vs for with getAttribute vs getElementsByClassName

Created: one year ago by: Guest

Jump to the latest result

querySelectorAll with .class

querySelectorAll with [attribute]

filter with classList

filter with className

filter with getAttribute

for with classList

for with className

for with getAttribute

getElementsByClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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