Benchmark: Convert Nodelist to Array: Array.slice vs. Spread vs. Array.from

HTML Preparation code:

<div id='parent'>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Tests:

Spread Operator [...]
let arr = [...document.querySelectorAll('.child')];
[].slice.call()
let arr = [].slice.call(document.querySelectorAll('.child'));
Array.from()
let arr = Array.from(document.querySelectorAll('.child'));
Array.prototype.slice.call()
let arr = Array.prototype.slice.call(document.querySelectorAll('.child'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread Operator [...]
[].slice.call()
Array.from()
Array.prototype.slice.call()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 8.1

View result in a separate tab

Test name	Executions per second
Spread Operator [...]	82743.3 Ops/sec
[].slice.call()	220703.5 Ops/sec
Array.from()	83739.4 Ops/sec
Array.prototype.slice.call()	218947.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definition and explain what is being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark measures the performance of three different methods to convert a NodeList to an Array:

1. **Spread Operator (`...`)**: `let arr = [...document.querySelectorAll('.child')]`
2. **`.slice()` method**: `let arr = [].slice.call(document.querySelectorAll('.child'))`
3. **`Array.from()` method**: `let arr = Array.from(document.querySelectorAll('.child'))`

**Comparison**

The benchmark compares the performance of these three methods on a large NodeList (in this case, all elements with the class `child`) in a Chrome browser on a Mac OS X 10.15.7 platform.

**Methods Compared**

1. **Spread Operator (`...`)**: This method creates a new Array by spreading the NodeList's elements into an array.
2. **`.slice()` method**: This method returns a shallow copy of the specified range of elements in the NodeList. The `[]` syntax is used to create an empty array that will be populated with the NodeList's elements.
3. **`Array.from()` method**: This method creates a new Array from an iterable (in this case, the NodeList).

**Performance Comparison**

The benchmark result shows the number of executions per second for each method:

* Spread Operator (`...`): 87978.203125 executions/second
* `.slice()` method: 111267.3359375 executions/second
* `Array.from()` method: 91535.203125 executions/second

Based on these results, it appears that the `.slice()` method is the fastest, followed closely by `Array.from()`, and then the Spread Operator (`...`).

**Pros and Cons of Each Method**

1. **Spread Operator (`...`)**:
	* Pros: Simple and concise syntax.
	* Cons: May be slower due to the overhead of creating a new array.
2. **`.slice()` method**:
	* Pros: Fast and efficient, as it uses native JavaScript methods.
	* Cons: Can be less readable than other options, especially for those unfamiliar with the `.slice()` method.
3. **`Array.from()` method**:
	* Pros: Flexible and powerful, as it can convert various types of iterables to arrays.
	* Cons: May be slower than native methods like `.slice()`, due to the overhead of creating an iterator.

In summary, while all three methods have their pros and cons, the `.slice()` method appears to be the fastest option for converting a NodeList to an Array. However, the Spread Operator (`...`) is still a viable choice when simplicity and readability are more important than raw performance.

Related benchmarks:

Convert Nodelist to Array: Array.slice vs. Spread vs. Array.from (version: 1)

Comparing performance of: Spread Operator [...] vs [].slice.call() vs Array.from() vs Array.prototype.slice.call()

Created: one year ago by: Registered User

Jump to the latest result

Spread Operator [...]

[].slice.call()

Array.from()

Array.prototype.slice.call()

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):