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: 2 years ago

Benchmark engine: Benchmark.js

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

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