Benchmark: querySelector vs Loop v6

querySelector vs Loop v6 (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 vs Object Property

Created: 3 years ago by: Guest

Jump 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

Test name	Executions per second
querySelectorAll with .class	1036.7 Ops/sec
querySelectorAll with [attribute]	366.7 Ops/sec
filter with classList	185.7 Ops/sec
filter with className	508.9 Ops/sec
filter with getAttribute	476.6 Ops/sec
for with classList	75.8 Ops/sec
for with className	146.0 Ops/sec
for with getAttribute	147.2 Ops/sec
getElementsByClassName	5878595.5 Ops/sec
Object Property	7953281.5 Ops/sec

Related benchmarks: