Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
NodeList loop iterator comparison v2
(version: 0)
Comparing performance of:
for ... of vs Array.from vs NodeList.forEach
Created:
one year ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<ul> </ul> <ol> </ol>
Script Preparation code:
const ul = document.querySelector('ul'); const ol = document.querySelector('ul'); for (let i = 0; i < 1000; i++) { const li = document.createElement('li') li.classList.add(i % 2 === 0 ? 'even' : 'odd') ul.appendChild(document.createElement('li')); ol.appendChild(document.createElement('li')); } var oddListItems = document.querySelectorAll('li.odd'); var anything = [];
Tests:
for ... of
for (const item of oddListItems) { anything.push(item); }
Array.from
Array.from(oddListItems).forEach(item => anything.push(item));
NodeList.forEach
oddListItems.forEach(item => anything.push(item));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
for ... of
Array.from
NodeList.forEach
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0
Browser/OS:
Firefox 131 on Ubuntu
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
for ... of
56175100.0 Ops/sec
Array.from
22263000.0 Ops/sec
NodeList.forEach
97272792.0 Ops/sec
Related benchmarks:
fafafafaf
NodeList vs Array iterator
NodeList vs Array iterator 3
NodeList vs Array iterator 4
NodeList loop iterator comparison
Array.from vs Spread with Node List DOM
Array.from vs Spread with Node List DOM More
childNodes - Two calls
Array.from vs spread for DOM
Comments
Confirm delete:
Do you really want to delete benchmark?