Benchmark: Array.prototype.slice vs 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.prototype.slice on NodeList
var other = [].slice.call(fooSet);
Array.prototype.concat on NodeList
var other = [].concat.call([],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.prototype.slice on NodeList
Array.prototype.concat on NodeList
Array.from on NodeList
Spread on NodeList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 119 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice on NodeList	14880080.0 Ops/sec
Array.prototype.concat on NodeList	9067304.0 Ops/sec
Array.from on NodeList	147007.5 Ops/sec
Spread on NodeList	148772.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark tests the performance of three different approaches for creating an array from a NodeList in modern JavaScript: `Array.prototype.slice()`, `Array.prototype.concat()`, and the spread operator (`...`).

**Benchmark Definition JSON Explanation**

The benchmark definition JSON contains information about the test:

* `"Name"`: The name of the benchmark, which is "Array.prototype.slice vs Array.from vs Spread with Node List".
* `"Description"`: No description is provided.
* `"Script Preparation Code"`: This code creates a new `Set` object called `fooSet`, selects an unordered list (`ul`) from the DOM using `document.querySelector()`, and populates it with 100 elements using a loop. Then, it creates three NodeList objects from the list items using different methods: `Array.prototype.slice()`, `Array.prototype.concat()`, and the spread operator (`...`).
* `"Html Preparation Code"`: This code generates an empty unordered list (`<ul>`) in the HTML.

**Individual Test Cases**

Each test case represents a single variation of creating an array from a NodeList:

1. **"Array.prototype.slice on NodeList"`**: Creates an array by slicing the `fooSet` NodeList object using `Array.prototype.slice()`.
2. **"Array.prototype.concat on NodeList"`**: Creates an array by concatenating two empty arrays using `Array.prototype.concat()` and then passing the `fooSet` NodeList to it.
3. **"Array.from on NodeList"`**: Creates an array from the `listItems` NodeList object using `Array.from()`.
4. **"Spread on NodeList"`**: Creates an array from the `listItems` NodeList object using the spread operator (`...`).

**Library and Purpose**

* No libraries are explicitly mentioned in the benchmark, but it uses modern JavaScript features like `Set`, `Array.prototype.slice()`, and `Array.prototype.concat()`.

**Special JS Features or Syntax**

The benchmark uses several modern JavaScript features:

* `Set`: A built-in data structure that stores unique values.
* Spread operator (`...`): Introduced in ECMAScript 2015 (ES6), it allows creating a new array from an existing iterable object.

**Pros and Cons of Each Approach**

1. **`Array.prototype.slice()`**:
	* Pros: Fast, efficient, and widely supported.
	* Cons: Can create a shallow copy of the original data, which may not be desirable if you need to modify the original data.
2. **`Array.prototype.concat()`**:
	* Pros: Creates a deep copy of the original data, ensuring that modifications made to the resulting array do not affect the original data.
	* Cons: Can be slower than `slice()` for large datasets due to the overhead of creating an empty array and concatenating elements to it.
3. **Spread operator (`...`)**:
	* Pros: Creates a shallow copy of the original data, which is faster than `concat()`. It also allows creating arrays from other iterables like sets or maps.
	* Cons: Not as widely supported as `slice()` and `concat()`, especially in older browsers.

**Other Alternatives**

If you need to create an array from a NodeList without using these methods:

* **Using `Array.from()`**: This method is similar to the spread operator but creates a shallow copy of the original data.
* **Using `NodeList.prototype.map()`**: This method applies a transformation function to each element in the NodeList and returns a new array.
* **Using `NodeList.prototype.forEach()`**: This method iterates over the elements in the NodeList without creating an array, which can be useful if you need to process the data but don't need to create an array.

Note that these alternatives may have different performance characteristics and use cases compared to the methods tested in this benchmark.

Related benchmarks:

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

Comparing performance of: Array.prototype.slice on NodeList vs Array.prototype.concat on NodeList vs Array.from on NodeList vs Spread on NodeList

Created: 3 years ago by: Registered User

Jump to the latest result

Array.prototype.slice on NodeList

Array.prototype.concat on NodeList

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 2 months ago):