Benchmark: querySelector vs Loop v6

querySelector vs Loop v6 (version: 0) Benchmark.js

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 vs Object Property`

Created: 3 years ago by: Guest

Go to the latest result

HTML Preparation code:

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

Script Preparation code:

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

Tests:

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

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
Object Property

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Object Property

8.0M/s

getElementsByClassName

5.9M/s

querySelectorAll with .class

1K/s

filter with className

509/s

filter with getAttribute

477/s

querySelectorAll with [attribute]

367/s

filter with classList

186/s

for with getAttribute

147/s

for with className

146/s

for with classList

76/s

View exact numbers

Test name	Executions per second
✓ Object Property	7,953,282 Ops/sec
getElementsByClassName	5,878,596 Ops/sec
querySelectorAll with .class	1,037 Ops/sec
filter with className	509 Ops/sec
filter with getAttribute	477 Ops/sec
querySelectorAll with [attribute]	367 Ops/sec
filter with classList	186 Ops/sec
for with getAttribute	147 Ops/sec
for with className	146 Ops/sec
for with classList	76 Ops/sec