Benchmark: querySelectorAll.length vs getAttribute

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;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getAttribute
dataset

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome Mobile 111 on Android

View result in a separate tab

Test name	Executions per second
querySelectorAll	408.3 Ops/sec
getAttribute	1487849.0 Ops/sec
dataset	1156513.0 Ops/sec

querySelectorAll.length vs getAttribute (version: 0)

Comparing performance of: querySelectorAll vs getAttribute vs dataset

Created: one year ago by: Guest

Jump to the latest result

querySelectorAll

getAttribute

dataset

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A