Benchmark: Spread with map vs Array.from()

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; }

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

for loop pre-allocate cached length

263K/s

for loop pre-allocate

210K/s

for loop push

185K/s

Array.from with map

84K/s

Spread with map

81K/s

Array.from with second parameter

78K/s

Fastest: for loop pre-allocate cached length (3.4x faster)

View exact numbers

✓ for loop pre-allocate cached length: 263,019 ops/sec
• for loop pre-allocate: 209,618 ops/sec
• for loop push: 184,689 ops/sec
• Array.from with map: 83,830 ops/sec
• Spread with map: 80,834 ops/sec
• Array.from with second parameter: 78,247 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Windows

View result in a separate tab

for loop pre-allocate cached length

551K/s

Array.from with second parameter

407K/s

Spread with map

405K/s

for loop pre-allocate

384K/s

Array.from with map

383K/s

for loop push

367K/s

View exact numbers

Test name	Executions per second
✓ for loop pre-allocate cached length	551,054 Ops/sec
Array.from with second parameter	407,040 Ops/sec
Spread with map	404,565 Ops/sec
for loop pre-allocate	383,677 Ops/sec
Array.from with map	383,415 Ops/sec
for loop push	367,298 Ops/sec

Spread with map vs Array.from() (version: 1)

Comparing performance of: `Spread with map vs Array.from with map vs Array.from with second parameter vs for loop push vs for loop pre-allocate vs for loop pre-allocate cached length`

Created: one year ago by: Guest

Go to the latest result

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

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Spread with map vs Array.from() (version: 1)

Comparing performance of: Spread with map vs Array.from with map vs Array.from with second parameter vs for loop push vs for loop pre-allocate vs for loop pre-allocate cached length

Created: one year ago by: Guest

Go to the latest result

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

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `Spread with map vs Array.from with map vs Array.from with second parameter vs for loop push vs for loop pre-allocate vs for loop pre-allocate cached length`