Loop through static node list - for VS for of

Benchmark created on

Description

Which is the fastest way to loop through a static nodeList from querySelectorAll

Preparation HTML

<h1>Loop through static node list - for Vs forEach</h1>
<nav aria-label="test navigation">
<ul id="here"></ul>
</nav>

Setup

const output = document.getElementById('here');
let lines = '';
for (let c = 0;c < 30000; c++) {
	lines += '<li class="lazy"><a href="#">Lazy</a></li>';
}
output.innerHTML = lines;

Test runner

Ready to run.

Testing in
TestOps/sec
Using normal for loop
const l = document.querySelectorAll('.lazy');
const ll = l.length;
for (let i = 0; i < ll; i++) {
	l[i].classList.add('done');
}
ready
Using for of
const l = document.querySelectorAll('.lazy');

for (const litem of l) {
	litem.classList.add('done');
}
ready

Revisions

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