Benchmark: Array From vs Array slice vs [].slice vs spread

HTML Preparation code:

<div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div><div class="node"></div>

Script Preparation code:

var nodeList = document.querySelectorAll('.node');

Tests:

Array.from
let array = Array.from(nodeList);
Array.slice
let array = Array.prototype.slice.call(nodeList);
[].slice
let array = [].slice.call(nodeList);
...spread
let array = [...nodeList];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Array.slice
[].slice
...spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Linux

View result in a separate tab

Test name	Executions per second
Array.from	653809.3 Ops/sec
Array.slice	2031275.5 Ops/sec
[].slice	2054855.4 Ops/sec
...spread	832283.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark compares four different ways to create an array from an HTML node list:

1. `Array.from(nodeList)`
2. `Array.prototype.slice.call(nodeList)`
3. `[].slice.call(nodeList)`
4. `...spread`

These methods are used to convert a node list into an array, which is a fundamental data structure in JavaScript.

**Options Compared**

The benchmark compares the performance of these four methods:

* **`Array.from(nodeList)`**: Creates a new array by iterating over the node list and adding each element to the array. This method is supported since ES6.
* **`Array.prototype.slice.call(nodeList)`**: Uses the `slice()` method on the `Array.prototype` to create a new array. The `call()` method is then used to call the `slice()` method with the node list as an argument. This method is not specific to modern browsers and may behave differently in older versions.
* **`[].slice.call(nodeList)`**: Similar to the previous method, but uses an arrow function (`=>`) to create a new array.
* **`...spread`**: Uses the spread operator (`...`) to convert the node list into an array. This method is supported since ES6.

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

1. **`Array.from(nodeList)`**:
	* Pros: Modern browsers support this method, which is often faster.
	* Cons: May not be compatible with older browsers or versions.
2. **`Array.prototype.slice.call(nodeList)`**:
	* Pros: Widespread browser support, including older versions.
	* Cons: May be slower than `Array.from()` in modern browsers.
3. **`[].slice.call(nodeList)`**:
	* Pros: Similar to the previous method but uses an arrow function.
	* Cons: Behavior may differ in older browsers.
4. **`...spread`**:
	* Pros: Modern browsers support this method, which is often faster.
	* Cons: May not be compatible with very old browsers or versions.

**Library and Special JS Features**

None of the methods mentioned above rely on a specific library. However, if we consider libraries that may be used to execute the benchmark, it's worth noting that `Array.prototype.slice.call()` and `[].slice.call()` might use underlying polyfills or libraries to ensure compatibility across older browsers.

**Special JS Features**

If we look at the individual test cases, none of them rely on special JavaScript features. They are all standard JavaScript syntax.

**Other Alternatives**

In addition to these methods, other alternatives to create an array from a node list include:

* Using `Array.from()` with a callback function: `Array.from(nodeList, (element) => { ... })`
* Using `Object.values()` and `Array.prototype.push()`: `Array.prototype.push(...Object.values(nodeList))`

However, these methods are not part of the original benchmark definition.

In summary, the benchmark compares four different ways to create an array from an HTML node list: `Array.from()`, `Array.prototype.slice.call()`, `[].slice.call()`, and `...spread`. The choice of method depends on compatibility with older browsers and modern performance considerations.

Related benchmarks:

Array From vs Array slice vs [].slice vs spread (version: 0)

Comparing performance of: Array.from vs Array.slice vs [].slice vs ...spread

Created: one year ago by: Guest

Jump to the latest result

Array.from

Array.slice

[].slice

...spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):