Collection vs. DOM Walk

Benchmark created on

Preparation HTML

<ul id="test"></ul>

Setup

const ul = document.getElementById("test");
for (let i = 0; i < 1000; i++) {
	ul.appendChild(
		document.createElement("li")
	).textContent = i;
}

Test runner

Ready to run.

Testing in
TestOps/sec
DOM Walk
let li = document.getElementById("test").firstElementChild;
do {
	li.classList.add("test1");
} while (li = li.nextElementSibling);
ready
For on assignment
for (
	let i = 0, items = document.querySelectorAll("#test li"), li;
	li = items[i];
	i++
) li.classList.add("test2");
ready
for..of
for (
	let li of document.querySelectorAll("#test li")
) li.classList.add("test3");
ready
foreach
document.querySelectorAll("#test li").forEach(
	(li) => li.classList.add("test4")
);
ready

Revisions

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