Multiple querySelectorAll vs NodeList

Benchmark created on

Preparation HTML

<div id="container">
</div>

Setup

const container = document.getElementById('container');
const addBoxes = (n) => {
	for (let i = 0; i < n; i++) {
		const box = document.createElement('div');
		box.className = 'box';
		container.appendChild(box);
	}
}

Test runner

Ready to run.

Testing in
TestOps/sec
Multiple querySelectorAll
const counts = [];
addBoxes(100);
counts.push(document.querySelectorAll('.container .box').length);
addBoxes(1000);
counts.push(document.querySelectorAll('.container .box').length);
addBoxes(10000);
counts.push(document.querySelectorAll('.container .box').length);
addBoxes(100000);
counts.push(document.querySelectorAll('.container .box').length);
ready
NodeList
const counts = [];
const boxes = document.querySelectorAll('.container .box');
addBoxes(100);
counts.push(boxes.length);
addBoxes(1000);
counts.push(boxes.length);
addBoxes(10000);
counts.push(boxes.length);
addBoxes(100000);
counts.push(boxes.length);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.