Testing methods of iterating over an array of Elements with some classname after selecting them

Benchmark created on

Description

A common pattern I observe is:

  1. Get a list of elements by class,
  2. Iterate over them and do something.

Testing many methods of doing this, such as using querySelectorAll, getElementsByClassName, spreads, etc.

Preparation HTML

<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>
<div class="test-el"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
forEach + getElementsByClassName + spread on lefthand
const [...els] = document.getElementsByClassName("test-el")
els.forEach((a) => { const b = a })
ready
forEach + getElementsByClassName + spread on righthand
const els = [...document.getElementsByClassName("test-el")]
els.forEach((a) => { const b = a })
ready
forEach + querySelectorAll
const els = document.querySelectorAll(".test-el")
els.forEach((a) => { const b = a })
ready
for + getElementsByClassName
const els = document.getElementsByClassName("test-el")
for (let i = 0; i < els.length; i += 1) {
	const b = els[i]
}
ready
for + getElementsByClassName + readable name const assignment
const els = document.getElementsByClassName("test-el")
for (let i = 0; i < els.length; i += 1) {
	const a = els[i]
	const b = a
}
ready
forEach + getElementsByClassName + spread on righthand + noop
const els = [...document.getElementsByClassName("test-el")]
els.forEach((a) => {})
ready
Array.from + getElementsByClassName
const els = Array.from(document.getElementsByClassName("test-el"))
els.forEach((a) => { const b = a })
ready

Revisions

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