Run results for: querySelectorAll.length vs getAttribute

Run details:

User agent: Mozilla/5.0 (Linux; Android 13; SM-F721B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 111

Operating system: Android

Device Platform: Mobile

Date tested: one year ago

Test name	Executions per second
querySelectorAll	408.3 Ops/sec
getAttribute	1487849.0 Ops/sec
dataset	1156513.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