Run results for: Spread with map vs Array.from()

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser: Chrome 137

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Spread with map	82900.1 Ops/sec
Array.from with map	86151.9 Ops/sec
Array.from with second parameter	85176.0 Ops/sec
for loop push	192191.8 Ops/sec
for loop pre-allocate	222388.0 Ops/sec
for loop pre-allocate cached length	270177.7 Ops/sec

HTML Preparation code:

<div id="00"></div>
<div id="01"></div>
<div id="02"></div>
<div id="03"></div>
<div id="04"></div>
<div id="05"></div>
<div id="06"></div>
<div id="07"></div>
<div id="08"></div>
<div id="09"></div>
<div id="10"></div>
<div id="11"></div>
<div id="12"></div>
<div id="13"></div>
<div id="14"></div>
<div id="15"></div>
<div id="16"></div>
<div id="17"></div>
<div id="18"></div>
<div id="19"></div>
<div id="20"></div>
<div id="21"></div>
<div id="22"></div>
<div id="23"></div>
<div id="24"></div>
<div id="25"></div>
<div id="26"></div>
<div id="27"></div>
<div id="28"></div>
<div id="29"></div>
<div id="30"></div>
<div id="31"></div>
<div id="32"></div>
<div id="33"></div>
<div id="34"></div>
<div id="35"></div>
<div id="36"></div>
<div id="37"></div>
<div id="38"></div>
<div id="39"></div>
<div id="40"></div>
<div id="41"></div>
<div id="42"></div>
<div id="43"></div>
<div id="44"></div>
<div id="45"></div>
<div id="46"></div>
<div id="47"></div>
<div id="48"></div>
<div id="49"></div>
<div id="50"></div>
<div id="51"></div>
<div id="52"></div>
<div id="53"></div>
<div id="54"></div>
<div id="55"></div>
<div id="56"></div>
<div id="57"></div>
<div id="58"></div>
<div id="59"></div>
<div id="60"></div>
<div id="61"></div>
<div id="62"></div>
<div id="63"></div>
<div id="64"></div>
<div id="65"></div>
<div id="66"></div>
<div id="67"></div>
<div id="68"></div>
<div id="69"></div>
<div id="70"></div>
<div id="71"></div>
<div id="72"></div>
<div id="73"></div>
<div id="74"></div>
<div id="75"></div>
<div id="76"></div>
<div id="77"></div>
<div id="78"></div>
<div id="79"></div>
<div id="80"></div>
<div id="81"></div>
<div id="82"></div>
<div id="83"></div>
<div id="84"></div>
<div id="85"></div>
<div id="86"></div>
<div id="87"></div>
<div id="88"></div>
<div id="89"></div>
<div id="90"></div>
<div id="91"></div>
<div id="92"></div>
<div id="93"></div>
<div id="94"></div>
<div id="95"></div>
<div id="96"></div>
<div id="97"></div>
<div id="98"></div>
<div id="99"></div>

Script Preparation code:

const nodeList = document.querySelectorAll('div');

Tests:

Spread with map
const result = ([...nodeList]).map((node) => node.id);
Array.from with map
const result = Array.from(nodeList).map((node) => node.id);
Array.from with second parameter
const result = Array.from(nodeList, (node) => node.id);
for loop push
const result = []; for (let i = 0; i < nodeList.length; i++) { result.push(nodeList[i].id); }
for loop pre-allocate
const result = new Array(nodeList.length); for (let i = 0; i < nodeList.length; i++) { result[i] = nodeList[i].id; }
for loop pre-allocate cached length
const length = nodeList.length; const result = new Array(length); for (let i = 0; i < length; i++) { result[i] = nodeList[i].id; }

Run results for: Spread with map vs Array.from()

Spread with map

Array.from with map

Array.from with second parameter

for loop push

for loop pre-allocate

for loop pre-allocate cached length