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>

AخA
 
<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')];
let arr = [...document.querySelectorAll('.child')];
[].slice.call()
let arr = [].slice.call(document.querySelectorAll('.child'));
let arr = [].slice.call(document.querySelectorAll('.child'));
Array.from()
let arr = Array.from(document.querySelectorAll('.child'));
let arr = Array.from(document.querySelectorAll('.child'));
Array.prototype.slice.call()
let arr = Array.prototype.slice.call(document.querySelectorAll('.child'));
let arr = Array.prototype.slice.call(document.querySelectorAll('.child'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

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:

Spread Operator (...): let arr = [...document.querySelectorAll('.child')]
.slice() method: let arr = [].slice.call(document.querySelectorAll('.child'))
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

Spread Operator (...): This method creates a new Array by spreading the NodeList's elements into an array.
.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.
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

Spread Operator (...):
- Pros: Simple and concise syntax.
- Cons: May be slower due to the overhead of creating a new array.
.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.
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.

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