Run results for: querySelectorAll.length vs getAttribute

Run details:

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

Browser: Chrome 111

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
querySelectorAll	371.5 Ops/sec
getAttribute	2583852.0 Ops/sec
dataset	2183820.0 Ops/sec

HTML Preparation code:

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

Script Preparation code:

const elementCount = 100000;
const body = document.getElementById('testBody');
body.setAttribute('data-items-count', elementCount);
// 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`);
 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
const itemsCount = window.testBody.querySelectorAll('.test').length;
getAttribute
const itemsCount = window.testBody.getAttribute('data-items-count');
dataset
const itemsCount = window.testBody.dataset.itemsCount;

Run results for: querySelectorAll.length vs getAttribute

querySelectorAll

getAttribute

dataset