Run results for: querySelectorAll.length vs getAttribute

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Browser: Chrome 108

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
querySelectorAll	323.1 Ops/sec
getAttribute	2342632.0 Ops/sec
dataset	1966277.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