Benchmark: Concat vs push(...) for large arrays with PrototypePushApply

Script Preparation code:

window.top.tests = {control:[], concat:[], spread:[], pushApply: []};
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'); }
PrototypePushApply
Array.prototype.push.apply(window.top.tests.pushApply, window.test) if (window.top.tests.pushApply.length > window.cutoff) { window.top.tests.pushApply = []; console.log('pushApply spread'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Linux

View result in a separate tab

Spread

767K/s

PrototypePushApply

693K/s

Concat

385K/s

Control (for push)

174K/s

View exact numbers

Test name	Executions per second
✓ Spread	766,986 Ops/sec
PrototypePushApply	693,437 Ops/sec
Concat	385,284 Ops/sec
Control (for push)	173,997 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance differences in JavaScript can be fascinating, and BenchmarkThat.net is a great tool for comparing various approaches.

The provided JSON represents a benchmark test that compares four different methods to append elements to an array:

1. `Control (for push)`: Uses the `push()` method directly on the `control` array.
2. `Concat`: Uses the `concat()` method to concatenate new elements to the end of the `concat` array.
3. `Spread`: Uses the spread operator (`...`) to append new elements to the end of the `spread` array.
4. `PrototypePushApply`: Uses the `push.apply()` method, which is a prototype-based method that applies an array function to all elements of an array.

Let's dive into each option:

**Control (for push)**

* **Pros**: Simple and straightforward.
* **Cons**: Might involve more overhead due to the direct array manipulation.
* This approach is straightforward, as it simply pushes new elements onto the `control` array. However, this might lead to unnecessary re-arrangements of the original array.

**Concat**

* **Pros**: Efficiently uses the `concat()` method, which is optimized for performance.
* **Cons**: Might involve more overhead due to the repeated concatenations.
* This approach creates a new concatenated array each time, which can be expensive. However, it's likely that modern browsers have optimized `concat()` for performance.

**Spread**

* **Pros**: Efficiently uses the spread operator, which is a relatively recent addition to JavaScript (ES6+).
* **Cons**: Might not be supported in older browsers or environments.
* This approach creates a new array by spreading elements from the original array. It's efficient because it avoids re-arranging the original array.

**PrototypePushApply**

* **Pros**: Efficiently uses the `push.apply()` method, which is optimized for performance.
* **Cons**: Might not be supported in older browsers or environments due to its prototype-based nature.
* This approach applies an array function to all elements of the `pushApply` array using `push.apply()`. It's efficient because it avoids re-arranging the original array.

Regarding special JavaScript features, the `spread operator` (`...`) is a relatively recent addition to JavaScript (ES6+) and might not be supported in older browsers or environments. However, most modern browsers support ES6+ features.

**Other alternatives**

If you want to compare more approaches, you could also consider using:

* `Array.prototype.slice()`: Creates a shallow copy of the original array.
* `Array.prototype.unshift()`: Adds elements to the beginning of the array.
* `Array.prototype.splice()`: Removes or replaces elements in the array.

However, for this specific benchmark test, the four options provided are sufficient to compare the performance differences between different approaches.

Concat vs push(...) for large arrays with PrototypePushApply (version: 0)

Comparing the various ways to append to a large array

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

Created: 2 years ago by: Guest

Go to the latest result

Control (for push)

Concat

Spread

PrototypePushApply

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Concat vs push(...) for large arrays with PrototypePushApply (version: 0)

Comparing the various ways to append to a large array

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

Created: 2 years ago by: Guest

Go to the latest result

Control (for push)

Concat

Spread

PrototypePushApply

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: `Control (for push) vs Concat vs Spread vs PrototypePushApply`