Benchmark: create array of nodes Array from vs slice vs push vs index vs spread

HTML Preparation code:

<ul id="my-test-ul">
</ul>

Script Preparation code:

var ul = document.getElementById('my-test-ul');
for(var i=0;i<1000;i++) {
  ul.appendChild(document.createElement('li'));
}

var nodeList = document.querySelectorAll('ul#my-test-ul > li');

Tests:

Array.from
const arr = Array.from(nodeList);
Array.slice
const arr = Array.prototype.slice.call(nodeList, 0);
Array.push
const amount = nodeList.length; const arr = []; for (let i = 0; i < amount; i += 1) arr.push(nodeList[i]);
Array[index]
const amount = nodeList.length; const arr = Array(amount); for (let i = 0; i < amount; i += 1) arr[i] = nodeList[i];
Array spread
const arr = [...nodeList];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Array.slice
Array.push
Array[index]
Array spread

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Description**

The benchmark measures the performance of creating an array from a NodeList, using different methods:

1. `Array.from()`
2. `Array.prototype.slice.call()`
3. `Array.push()` with indexing
4. Direct indexing (`Array[index]`)
5. Array spread (`Array(...nodeList)`)

**Methods Comparison**

Here's a brief overview of each method and their pros and cons:

1. **`Array.from()`**: This method creates a new array from an iterable (in this case, a NodeList). It's a modern, concise way to create arrays. Pros: efficient, readable. Cons: may not be supported in older browsers.
2. **`Array.prototype.slice.call()`**: This method uses the `slice()` function to extract a subset of elements from the original array and then converts it to an array using `call()`. It's a more traditional way to create arrays. Pros: widely supported, no dependencies on modern features. Cons: less readable than `Array.from()`.
3. **`Array.push()` with indexing**: This method creates an array by pushing elements onto it using the `push()` function. The number of elements is determined by the length of the original NodeList. Pros: simple, efficient. Cons: may require extra iterations.
4. **Direct indexing (`Array[index]`)**: This method creates an array by assigning each element of the NodeList to a specific index in the new array. Pros: straightforward, easy to understand. Cons: may be slower than other methods due to indexing overhead.
5. **Array spread (`Array(...nodeList)`)**: This method uses the spread operator to create a new array from the original NodeList. It's similar to `Array.from()`. Pros: concise, readable. Cons: may not be supported in older browsers.

**Library and Purpose**

In this benchmark, `Array.prototype.slice.call()` relies on the built-in `slice()` function of the Array prototype, which is a standard part of the JavaScript language.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark. The methods being compared are all part of the standard Array API and are supported by modern browsers.

**Other Alternatives**

If you wanted to test alternative methods for creating arrays, some examples could be:

* Using `Array.isArray()` to check if an object is an array and then using its length property to determine how many elements to create.
* Using a library like Lodash or Ramda that provides more functional programming-style array creation functions.
* Testing different data structures, such as TypedArrays (e.g., `Int32Array`) or binary search trees.

Keep in mind that these alternative methods may not be representative of real-world use cases and may introduce additional overhead or dependencies.

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-N960N) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/21.0 Chrome/110.0.5481.154 Mobile Safari/537.36

Browser/OS: Chrome Mobile 110 on Android

View result in a separate tab

Test name	Executions per second
Array.from	1327.1 Ops/sec
Array.slice	1702.9 Ops/sec
Array.push	1979.8 Ops/sec
Array[index]	2217.6 Ops/sec
Array spread	1341.3 Ops/sec

Related benchmarks:

create array of nodes Array from vs slice vs push vs index vs spread (version: 0)

Comparing performance of: Array.from vs Array.slice vs Array.push vs Array[index] vs Array spread

Created: one year ago by: Registered User

Jump to the latest result

Array.from

Array.slice

Array.push

Array[index]

Array spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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