Benchmark: new Array from vs slice vs push vs index vs spread

Tests:

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

Historical Performance Data aggregated from 144 community runs

Desktop Results:

Chrome 92 runs

Array.push

1.7M/s

Array[index]

1.6M/s

Array.slice

490K/s

Array spread

469K/s

Array.from

438K/s

Fastest: Array.push (3.9x faster)

View exact numbers

✓ Array.push: 1,721,163 ops/sec
• Array[index]: 1,605,992 ops/sec
• Array.slice: 489,984 ops/sec
• Array spread: 468,659 ops/sec
• Array.from: 438,229 ops/sec

Firefox 31 runs

Array.slice

1.9M/s

Array[index]

1.8M/s

Array.push

1.8M/s

Array spread

1.0M/s

Array.from

949K/s

Fastest: Array.slice (2.0x faster)

View exact numbers

✓ Array.slice: 1,853,294 ops/sec
• Array[index]: 1,773,785 ops/sec
• Array.push: 1,758,408 ops/sec
• Array spread: 1,011,251 ops/sec
• Array.from: 949,183 ops/sec

Safari 7 runs

Array.push

3.9M/s

Array[index]

3.4M/s

Array.slice

2.7M/s

Array spread

2.2M/s

Array.from

2.1M/s

Fastest: Array.push (1.9x faster)

View exact numbers

✓ Array.push: 3,948,152 ops/sec
• Array[index]: 3,379,769 ops/sec
• Array.slice: 2,651,936 ops/sec
• Array spread: 2,152,680 ops/sec
• Array.from: 2,089,297 ops/sec

Mobile Results:

Safari 8 runs

Array.push

2.2M/s

Array[index]

1.8M/s

Array spread

1.7M/s

Array.from

1.5M/s

Array.slice

1.1M/s

Fastest: Array.push (2.1x faster)

View exact numbers

✓ Array.push: 2,227,010 ops/sec
• Array[index]: 1,819,130 ops/sec
• Array spread: 1,667,172 ops/sec
• Array.from: 1,534,554 ops/sec
• Array.slice: 1,083,976 ops/sec

Chrome 6 runs

Array.push

1.0M/s

Array[index]

891K/s

Array.slice

294K/s

Array spread

280K/s

Array.from

271K/s

Fastest: Array.push (3.7x faster)

View exact numbers

✓ Array.push: 1,008,764 ops/sec
• Array[index]: 891,080 ops/sec
• Array.slice: 293,783 ops/sec
• Array spread: 280,174 ops/sec
• Array.from: 270,699 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Browser/OS: Chrome 143 on Windows

View result in a separate tab

Array[index]

2.6M/s

Array.push

2.6M/s

Array.slice

760K/s

Array spread

670K/s

Array.from

595K/s

View exact numbers

Test name	Executions per second
✓ Array[index]	2,648,602 Ops/sec
Array.push	2,552,919 Ops/sec
Array.slice	760,159 Ops/sec
Array spread	669,597 Ops/sec
Array.from	594,522 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what each test case is trying to measure.

The benchmark is testing the performance of different ways to create an array in JavaScript:

1. `Array.from`: Creates an array from an iterable object (in this case, `document.all`).
2. `Array.prototype.slice.call()`: Converts an array-like object into a true array using `slice.call()`.
3. `Array.prototype.push()`: Pushes elements onto the end of an empty array.
4. `Array[index]`: Accesses and assigns values to specific indices in an existing array.
5. `Array spread` (using the spread operator): Creates a new array by spreading an iterable object.

Each test case creates an array with a specific number of elements, using one of these methods, and then measures how many executions per second are possible on different browsers and devices.

Now, let's discuss the pros and cons of each approach:

1. `Array.from`:
	* Pros: Creates a new array from an iterable object, which can be more efficient than pushing elements onto an existing array.
	* Cons: May not perform well if the iterable object is very large or has many duplicate values.
2. `Array.prototype.slice.call()`:
	* Pros: Converts an array-like object into a true array, which can be useful for certain use cases.
	* Cons: Creates a new array, which can lead to increased memory usage and slower performance compared to other methods.
3. `Array.prototype.push()`:
	* Pros: Pushes elements onto the end of an empty array, which is often used in push-based algorithms.
	* Cons: Slower than other methods due to the overhead of pushing elements onto an array.
4. `Array[index]`:
	* Pros: Can be faster for large arrays since it only accesses and assigns values at specific indices.
	* Cons: Requires manual indexing, which can lead to errors if not implemented correctly.
5. `Array spread` (using the spread operator):
	* Pros: Creates a new array by spreading an iterable object, which can be more efficient than pushing elements onto an existing array.
	* Cons: May not perform well if the iterable object is very large or has many duplicate values.

In general, the performance differences between these methods are relatively small, and the choice of method often depends on the specific use case and requirements. However, `Array.from` and `Array spread` tend to be faster since they create new arrays instead of pushing elements onto existing ones.

Regarding the libraries used in the benchmark, none are explicitly mentioned other than `document` which is a built-in JavaScript object that provides access to HTML document objects.

There are no special JavaScript features or syntax being tested in this benchmark. The focus is on comparing the performance of different array creation methods.

If you want to create alternative benchmarks for specific use cases or libraries, you could consider exploring other methods such as:

* Using `Array.from()` with different types of iterables (e.g., arrays, sets, maps)
* Comparing the performance of `Array.prototype.push()` versus other push-based algorithms (e.g., `array.push()`, `for` loops)
* Creating benchmarks for specific browsers or environments
* Testing the performance of array creation methods in conjunction with other operations (e.g., sorting, filtering)

new Array from vs slice vs push vs index vs spread (version: 3)

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

Created: 5 years ago by: Registered User

Go to the latest result

Array.from

Array.slice

Array.push

Array[index]

Array spread

Historical Performance Data aggregated from 144 community runs

Desktop Results:

Chrome 92 runs

Firefox 31 runs

Safari 7 runs

Mobile Results:

Safari 8 runs

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

new Array from vs slice vs push vs index vs spread (version: 3)

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

Created: 5 years ago by: Registered User

Go to the latest result

Array.from

Array.slice

Array.push

Array[index]

Array spread

Historical Performance Data aggregated from 144 community runs

Desktop Results:

Chrome 92 runs

Firefox 31 runs

Safari 7 runs

Mobile Results:

Safari 8 runs

Chrome 6 runs

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: `Array.from vs Array.slice vs Array.push vs Array[index] vs Array spread`