Benchmark: querySelector vs Loop v4

querySelector vs Loop v4 (version: 3)

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: 5 years ago by: Registered User

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 = []; for (let i=window.entities.length-1; i >= 0; 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 = []; for (let i=window.entities.length-1; i >= 0; 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 = []; for (let i=window.entities.length-1; i >= 0; 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: 11 months ago)

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll with .class	496.0 Ops/sec
querySelectorAll with [attribute]	352.9 Ops/sec
filter with classList	69.9 Ops/sec
filter with className	124.8 Ops/sec
filter with getAttribute	91.0 Ops/sec
for with classList	68.7 Ops/sec
for with className	136.3 Ops/sec
for with getAttribute	94.6 Ops/sec
getElementsByClassName	2704543.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**Benchmark Definition**

The benchmark tests different approaches to selecting elements from a DOM tree:

1. `querySelectorAll` with `.class` attribute
2. `querySelectorAll` with `[attribute]` attribute
3. `filter` using `classList.contains`
4. `filter` using `className`
5. `filter` using `getAttribute`
6. `for` loop using `className`
7. `for` loop using `getAttribute`

The goal is to determine which approach is the most efficient.

**Approaches**

Here's a brief explanation of each approach:

1. **`querySelectorAll` with `.class` attribute**: This method uses a CSS selector to select elements that have an element with a class attribute. The `.class` syntax tells the browser to match elements that have any number of class attributes.
2. **`querySelectorAll` with `[attribute]` attribute**: Similar to the previous approach, but this time we use square brackets `[]` instead of dot notation `.` to select elements that have an attribute (in this case, an empty attribute).
3. **`filter` using `classList.contains`**: This method uses the `classList` property to get a list of classes for each element and then filters them using the `contains` method.
4. **`filter` using `className`**: Similar to the previous approach, but instead of using `classList`, we use the `className` property directly.
5. **`filter` using `getAttribute`**: This method uses the `getAttribute` method to get the value of a specific attribute for each element and then filters them based on that value.
6. **`for` loop using `className`**: This approach uses a traditional `for` loop to iterate over elements with a class name matching our criteria.
7. **`for` loop using `getAttribute`**: Similar to the previous approach, but instead of using `className`, we use `getAttribute`.

**Efficiency**

The efficiency of each approach depends on various factors such as:

* The number of matching elements
* The complexity of the CSS selector or attribute filter
* The browser's implementation of these methods

In general, `querySelectorAll` and `filter` methods are faster than traditional `for` loops because they use optimized algorithms to select elements.

**Results**

The benchmark results show that:

1. `getElementsByClassName` is the fastest method, with an average execution time of 28.11 ms per second.
2. `querySelectorAll` with `.class` attribute and `[attribute]` attribute are close seconds, with average execution times of around 45-50 ms per second.
3. `filter` methods using `classList.contains`, `className`, and `getAttribute` have slower average execution times, ranging from 70-120 ms per second.

These results suggest that `getElementsByClassName` is the most efficient method for selecting elements with a class name matching our criteria.

Keep in mind that these results may vary depending on your specific use case, browser, and version.

Related benchmarks: