Benchmark: Array.from vs Spread with Node List

HTML Preparation code:

<ul>
</ul>

Script Preparation code:

var fooSet = new Set();
var ul = document.querySelector('ul');
for(var i=0;i<100;i++) {
  fooSet.add(i);
  ul.appendChild(document.createElement('li'));
}

var listItems = document.querySelectorAll('li');

Tests:

Array.from
var other = Array.from(fooSet);
Spread
var other = [...fooSet];
Array.from on NodeList
var other = Array.from(listItems);
Spread on NodeList
var other = [...listItems];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread
Array.from on NodeList
Spread on NodeList

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	555298.0 Ops/sec
Spread	617939.4 Ops/sec
Array.from on NodeList	245590.1 Ops/sec
Spread on NodeList	247438.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark is designed to compare the performance of `Array.from()` and the spread operator (`...`) when creating arrays from different types of data: a `Set` object, an empty array, and a `NodeList`. The test cases aim to identify which approach is faster for each scenario.

**Test Scenarios**

There are four test scenarios:

1. **Array.from() vs Spread with Node Set**: This benchmark compares the performance of `Array.from()` and the spread operator when creating an array from a `Set` object.
2. **Array.from() vs Spread with Empty Array**: This benchmark is not present in the provided data, but it would compare the performance of `Array.from()` and the spread operator when creating an empty array.
3. **Array.from() vs Spread on NodeList**: This benchmark compares the performance of `Array.from()` and the spread operator when creating an array from a `NodeList`.
4. **Spread vs Array.from() on NodeList**: This benchmark compares the performance of the spread operator and `Array.from()` when creating an array from a `NodeList`.

**Comparison Options**

The two comparison options are:

1. **`Array.from()`**: A method that creates a new array from an iterable or an array-like object.
2. **Spread Operator (`...`)**: An operator that creates a new array by spreading the elements of an array or an iterable.

**Pros and Cons**

* **`Array.from()`**:
	+ Pros:
		- Can be used to create arrays from any type of data, including `Set`, `Map`, and `Array`.
		- Provides more control over the creation process.
	+ Cons:
		- Can be slower than the spread operator for large datasets.
* **Spread Operator (`...`)**:
	+ Pros:
		- Faster than `Array.from()` for large datasets.
		- Simplifies creating arrays from iterables or array-like objects.
	+ Cons:
		- Limited to creating arrays from specific types of data (iterable, array-like).
		- Less control over the creation process.

**Library and Syntax Considerations**

The test cases use the `Set` object, which is a collection of unique values. The spread operator (`...`) is used to create an array by spreading the elements of the set. The `Array.from()` method is also used to create an array from the set.

No special JavaScript features or syntax are required for this benchmark. However, if you want to use modern JavaScript features like async/await or destructuring assignment, it would impact the performance comparison results.

**Other Alternatives**

If you need to compare other array creation methods, here are some alternatives:

1. **`Array.prototype.slice()`**: Creates a shallow copy of an array.
2. **`Array.prototype.concat()`**: Concatenates multiple arrays into one.
3. **`new Array(size)`**: Creates a new array with the specified size.

Keep in mind that these alternative methods may have different performance characteristics compared to `Array.from()` and the spread operator.

Related benchmarks:

Array.from vs Spread with Node List (version: 0)

Comparing performance of: Array.from vs Spread vs Array.from on NodeList vs Spread on NodeList

Created: 6 years ago by: Guest

Jump to the latest result

Array.from

Spread

Array.from on NodeList

Spread on NodeList

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