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

Test name	Executions per second
Control (for push)	173997.3 Ops/sec
Concat	385283.6 Ops/sec
Spread	766986.5 Ops/sec
PrototypePushApply	693437.1 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.

Related benchmarks:

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

Jump 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):