Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Spread vs Array.from on NodeList
(version: 0)
Create array from Node.childNodes
Comparing performance of:
Spread vs Array.from
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="my-div"></div>
Script Preparation code:
const div = document.getElementById("my-div"); for (let i = 0; i < 10000; i++) { const child = document.createElement("div"); child.append(`I'm div-${i}`); div.append(child); }
Tests:
Spread
const div = document.getElementById("my-div"); const childNodes = [...div.childNodes];
Array.from
const div = document.getElementById("my-div"); const childNodes = Array.from(div.childNodes);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Spread
Array.from
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:120.0) Gecko/20100101 Firefox/120.0
Browser/OS:
Firefox 120 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=490118" width="100%" height="500px"></iframe>
Spread
2K/s
Array.from
2K/s
View exact numbers
Test name
Executions per second
✓
Spread
2,067 Ops/sec
Array.from
2,049 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its test cases. **Benchmark Purpose** The benchmark measures the performance of two approaches to create an array from the child nodes of an HTML element: using the spread operator (`...`) and `Array.from()` method. **Options Compared** The options compared are: 1. **Spread Operator (ES6+)**: This approach uses the spread operator to create a new array by spreading the child nodes of the element. 2. **Array.from() Method**: This approach uses the built-in `Array.from()` method to create a new array from an iterable, such as the child nodes of the element. **Pros and Cons** * **Spread Operator (ES6+)**: + Pros: Concise and expressive syntax, can be used in modern browsers. + Cons: Might not be supported in older browsers, can lead to slower performance due to the overhead of creating a new array. * **Array.from() Method**: + Pros: Widespread support across browsers, including older ones. Can be optimized for better performance by passing an empty array and mapping over the child nodes. + Cons: Requires a more verbose syntax, might lead to slower performance due to the overhead of creating a new array. **Library/Technologies Used** None in this benchmark, as it only uses standard JavaScript features. **Special JS Features/Syntax (none)** There are no special JavaScript features or syntaxes used in this benchmark. **Other Alternatives** If you want to create an array from the child nodes of an HTML element without using these two approaches: * **For loop**: You can use a traditional for loop to iterate over the child nodes and push them into an array. * **Array.from() with Object.values()**: If the element has only one property (in this case, `childNodes`), you can use `Object.values()` to get an array of its values. **Benchmark Preparation Code** The preparation code is already provided in the benchmark definition JSON: ```javascript const div = document.getElementById("my-div"); for (let i = 0; i < 10000; i++) { const child = document.createElement("div"); child.append(`I'm div-${i}`); div.append(child); } ``` This code creates an HTML element with 10,000 child nodes and appends them to the `my-div` element. **Benchmark Results** The latest benchmark results are: ```json [ { "RawUAString": "Mozilla/5.0 (X11; Linux x86_64; rv:120.0) Gecko/20100101 Firefox/120.0", "Browser": "Firefox 120", "DevicePlatform": "Desktop", "OperatingSystem": "Linux", "ExecutionsPerSecond": 2066.62890625, "TestName": "Spread" }, { "RawUAString": "Mozilla/5.0 (X11; Linux x86_64; rv:120.0) Gecko/20100101 Firefox/120.0", "Browser": "Firefox 120", "DevicePlatform": "Desktop", "OperatingSystem": "Linux", "ExecutionsPerSecond": 2049.33056640625, "TestName": "Array.from" } ] ``` These results show the execution time per second for both test cases on a Firefox 120 browser on a Linux desktop, with an average of approximately 2066.63 executions per second for `Spread` and 2049.33 executions per second for `Array.from`.
Related benchmarks
Convert Nodelist to Array: Array.slice vs. Spread vs. Array.from
Spread vs Array.from on querySelectorAll
Comments
Confirm delete:
Do you really want to delete benchmark?