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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 15 days ago)

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll with .class	811.7 Ops/sec
querySelectorAll with [attribute]	361.6 Ops/sec
filter with classList	112.7 Ops/sec
filter with className	181.4 Ops/sec
filter with getAttribute	128.7 Ops/sec
for with classList	57.0 Ops/sec
for with className	81.2 Ops/sec
for with getAttribute	62.7 Ops/sec
getElementsByClassName	2864709.0 Ops/sec

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

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