DOM Walk vs. Collections

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;
}

Teardown

document.getElementById("test").textContent = "";

Test runner

Ready to run.

Testing in
TestOps/sec
DOM Walk, If Do/while
let li = document.getElementById("test").firstElementChild;
if (li) do {
	li.classList.add("test1");
} while (li = li.nextElementSibling);
ready
DOM Walk, for loop
for (
	let li = document.getElementById("test").firstElementChild;
	li;
	li = li.nextElementSibling
) li.classList.add("test2");
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("test4");
ready
Array.forEach
document.querySelectorAll("#test li").forEach(
	(li) => li.classList.add("test5")
);
ready

Revisions

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