Run results for: querySelector vs Loop v6

Run details:

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: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 10 months ago

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

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; }

Run results for: querySelector vs Loop v6

If you have a large number of elements, is it faster to use querySelectorAll, or to iterate over an array?

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