Run results for: Array.from(NodeList).map vs [...NodeList].map vs map.call(NodeList) vs. NodeList#map copied from Array vs for loop

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

for loop

669K/s

NodeList#map

596K/s

[...NodeList].map

592K/s

map.call(NodeList)

537K/s

Array.from(NodeList).map

454K/s

View exact numbers

Script Preparation code:

NodeList.prototype.map = Array.prototype.map;
window.list = document.querySelectorAll('div');
window.mapper = node => node.outerHTML;

Tests:

Array.from(NodeList).map
Array.from(list).map(mapper);
[...NodeList].map
[...list].map(mapper);
map.call(NodeList)
Array.prototype.map.call(list, mapper);
NodeList#map
list.map(mapper);
for loop
const result = []; for (let i = 0; i < list.length; i++) result.push(mapper(list[i], i, list));