array.from vs iterator (v4)

Revision 4 of this benchmark created on

Preparation HTML

<div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div><div class='wow'>wow</div>

Setup

const divs = document.querySelectorAll('div')

Test runner

Ready to run.

Testing in
TestOps/sec
array from
const arr = Array.from(divs)

arr.forEach(div => div.classList.add('oof'))
ready
iter spread
const arr = [...divs]

arr.forEach(div => div.classList.add('oof'))
ready
for of
const arr = []

for (div of divs) {
	div.classList.add('oof')
	arr.push(div)
}
ready
for loop
const arr = []

for (let i = 0; i < divs.length; i++) {
	divs[i].classList.add('oof')
	arr.push(divs[i])
}
ready
for loop w cached length
const arr = []
const len = divs.length

for (let i = 0; i < len; i++) {
	divs[i].classList.add('oof')
	arr.push(divs[i])
}
ready
foreach
const arr = []

divs.forEach(d => {
	d.classList.add('oof')
	arr.push(d)
})
ready
array.from vs keys() length - array.from
const z = Array.from(divs).length
ready
array.from vs keys() length - array.from
const z = divs.keys().length
ready
iter .length property direct access
const z = divs.length
ready

Revisions

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