<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>
const nodeList = document.querySelectorAll('div');
const result = ([nodeList]).map((node) => node.id);
const result = Array.from(nodeList).map((node) => node.id);
const result = Array.from(nodeList, (node) => node.id);
const result = [];
for (let i = 0; i < nodeList.length; i++) {
result.push(nodeList[i].id);
}
const result = new Array(nodeList.length);
for (let i = 0; i < nodeList.length; i++) {
result[i] = nodeList[i].id;
}
const length = nodeList.length;
const result = new Array(length);
for (let i = 0; i < length; i++) {
result[i] = nodeList[i].id;
}
--enable-precise-memory-info
flag.
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 |
Test name | Executions per second |
---|---|
Spread with map | 91507.7 Ops/sec |
Array.from with map | 95276.0 Ops/sec |
Array.from with second parameter | 83111.0 Ops/sec |
for loop push | 194958.0 Ops/sec |
for loop pre-allocate | 216501.6 Ops/sec |
for loop pre-allocate cached length | 295437.1 Ops/sec |
In this benchmark from MeasureThat.net, various approaches to convert a NodeList
(of HTML <div>
elements) into an array of their IDs are compared. Specifically, the benchmark assesses the performance of several techniques in JavaScript for achieving this transformation.
Spread Syntax with map
:
const result = ([...nodeList]).map((node) => node.id);
NodeList
directly into an array, which is a familiar syntactical feature.Array.from
with map
:
const result = Array.from(nodeList).map((node) => node.id);
Array.from
is designed to create arrays from array-like structures.Array.from
with a Mapping Function:
const result = Array.from(nodeList, (node) => node.id);
Array.from
, reducing overhead.For Loop with push
:
const result = [];
for (let i = 0; i < nodeList.length; i++) {
result.push(nodeList[i].id);
}
Array.from
and map
.For Loop with Pre-allocated Array:
const result = new Array(nodeList.length);
for (let i = 0; i < nodeList.length; i++) {
result[i] = nodeList[i].id;
}
For Loop with Cached Length:
const length = nodeList.length;
const result = new Array(length);
for (let i = 0; i < length; i++) {
result[i] = nodeList[i].id;
}
NodeList
.The benchmark results show that the most efficient method was the "for loop pre-allocate cached length" which achieved the highest execution rate, emphasizing the effectiveness of minimizing lookups and utilizing pre-allocation when processing collections.
Library Usage: In this benchmark, none of the approaches utilize external libraries; all solutions leverage built-in JavaScript features.
Modern Syntax: The spread
operator and Array.from
are both features of JavaScript ES2015 (ES6) and later, which enhances code readability and syntactic brevity.
Alternative Approaches: Other alternatives could include using methods from libraries like Lodash for more advanced manipulations or even considering alternative data structures (like sets) for different performance implications.
In conclusion, when selecting a method, it's essential to consider not only performance but also code clarity and maintainability, especially in a team environment or for less experienced developers. The iterative approach with pre-allocation tends to provide the best performance in bulk operations but might sacrifice some readability compared to functional programming constructs like map
.