Benchmark: Spread vs Array.from on NodeList

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>

Previous results

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

Test name	Executions per second
Spread	2066.6 Ops/sec
Array.from	2049.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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:

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

Jump to the latest result

Spread

Array.from

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):