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: 3 years 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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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