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: one year 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

[].slice.call()

221K/s

Array.prototype.slice.call()

219K/s

Array.from()

84K/s

Spread Operator [...]

83K/s

View exact numbers

Test name	Executions per second
✓ [].slice.call()	220,704 Ops/sec
Array.prototype.slice.call()	218,948 Ops/sec
Array.from()	83,739 Ops/sec
Spread Operator [...]	82,743 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 3 years ago by: Registered User

Go to the latest result

Spread Operator [...]

[].slice.call()

Array.from()

Array.prototype.slice.call()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 3 years ago by: Registered User

Go to the latest result

Spread Operator [...]

[].slice.call()

Array.from()

Array.prototype.slice.call()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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