Benchmark: array spreads fixed

Script Preparation code:

window.top.tests = {control:[], concat:[], spread:[], spread2:[]};
window.test = (new Array(10)).fill(null);
window.cutoff = 5000;

Tests:

Control (for push)
for (let element of window.test) window.top.tests.control.push(element); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Concat
window.top.tests.concat = window.top.tests.concat.concat(window.test); if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
Spread
window.top.tests.spread.push(...window.test); if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }
Spread 2
window.top.tests.spread2 = [...window.top.tests.spread2, ...window.test]; if (window.top.tests.spread2.length > window.cutoff) { window.top.tests.spread2 = []; console.log('reset spread2'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Control (for push)
Concat
Spread
Spread 2

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is testing how to append elements to a large array. The script preparation code initializes an empty array `window.test` with 10 null values, and then sets up four different arrays: `control`, `concat`, `spread`, and `spread2`. Each array will be used as the target for appending elements from `window.test`.

**Test Cases**

There are four test cases:

1. **Control (for push)**:
	* This test appends each element of `window.test` to the `control` array using the `push()` method.
	* The test checks if the length of the `control` array exceeds a certain threshold (`window.cutoff`) and resets it if necessary.
2. **Concat**:
	* This test uses the `concat()` method to append each element of `window.test` to the `concat` array.
	* Similar to the previous test, it checks if the length of the `concat` array exceeds the threshold and resets it if necessary.
3. **Spread**:
	* This test uses the spread operator (`...`) to append each element of `window.test` to the `spread` array.
	* It checks if the length of the `spread` array exceeds the threshold and resets it if necessary.
4. **Spread 2**:
	* This test is identical to the previous one, but uses the spread operator (`...`) on an already initialized `spread2` array instead of creating a new one.

**Library and Special JS Features**

None of the tests directly use any libraries. However, they do utilize some standard JavaScript features:

* The `push()` method for appending elements to arrays.
* The `concat()` method for concatenating arrays.
* The spread operator (`...`) for spreading elements into an array.

**Options Compared**

The four test cases compare the performance of different methods for appending elements to arrays:

1. **Push vs Concat**: These two methods are similar, but `push()` is generally faster and more efficient.
2. **Push vs Spread**: In modern JavaScript, using the spread operator (`...`) is often faster than `push()`, especially when dealing with large arrays.
3. **Concat vs Spread**: The performance difference between these two methods is negligible, as both are optimized for array concatenation.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Push**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: Can be slower than `spread()` in some cases.
* **Concat**:
	+ Pros: Can be used to create new arrays without modifying existing ones.
	+ Cons: Generally slower than `push()`.
* **Spread**:
	+ Pros: Fast, modern, and optimized for large array operations.
	+ Cons: May not work as expected in older browsers or environments.

**Other Alternatives**

In addition to the methods tested in this benchmark, other alternatives for appending elements to arrays include:

* Using a `for` loop with `array[index] = element;`
* Using the `unshift()` method instead of `push()`
* Using a library like Lodash's `assign()` function

Keep in mind that these alternatives may have varying levels of performance, compatibility, and readability compared to the methods tested in this benchmark.

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 15 on iOS 15.5

View result in a separate tab

Test name	Executions per second
Control (for push)	610954.1 Ops/sec
Concat	341769.1 Ops/sec
Spread	1607352.2 Ops/sec
Spread 2	137534.4 Ops/sec

Related benchmarks:

array spreads fixed (version: 0)

Comparing the various ways to append to a large array

Comparing performance of: Control (for push) vs Concat vs Spread vs Spread 2

Created: 2 years ago by: Guest

Jump to the latest result

Control (for push)

Concat

Spread

Spread 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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