Benchmark: isoppp array proptotype push vs concat vs spread

Script Preparation code:

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

Tests:

Control (for push)
Array.prototype.push.apply(window.top.tests.prototypePush, window.test) if (window.top.tests.prototypePush.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'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Control (for push)
Concat
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Control (for push)	315744.1 Ops/sec
Concat	916710.2 Ops/sec
Spread	1990614.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested, compared, and the pros/cons of different approaches.

**Benchmark Overview**

The benchmark is designed to compare three ways to append elements to a large array:

1. `Array.prototype.push.apply()`
2. `Array.prototype.concat()`
3. `Spread operator (...)` for push

**Options Comparison**

*   **`Array.prototype.push.apply()`**: This method uses the `apply()` method to call the `push()` method on the array with an array of elements as its argument. The pros include:

*   It's a built-in method, so it's likely to be highly optimized.
    *   It's often faster than other methods because it avoids creating an intermediate array.

However, the cons are that:

*   It can be slower if the number of elements is very large, as it needs to create an array with all the elements beforehand and then push them one by one.
*   **`Array.prototype.concat()`**: This method uses the `concat()` method to concatenate two arrays. The pros include:

*   It's also a built-in method, so it's likely to be highly optimized.
    *   It can be faster than other methods because it creates an intermediate array with all the elements before returning the new concatenated array.

However, the cons are that:

*   It can create an unnecessary intermediate array in memory, which might not be desirable for large datasets.
*   **`Spread operator (...)`**: This method uses the spread operator (`...`) to unpack the elements of the array into separate arguments. The pros include:

*   It's a modern and concise way to achieve the same result.
    *   It avoids creating an intermediate array.

However, the cons are that:

*   It might be slower than other methods because it needs to create an intermediate array with all the elements beforehand.
*   Additionally, the test cases also compare the control variables (resetting them when they exceed a certain limit) to measure the overhead of maintaining these variables.

**Library and Special JS Features**

The benchmark uses the `window` object as a global context for testing. It's a common pattern in JavaScript benchmarks to use a global `window` or `global` object to define tests.

**Test Case Analysis**

*   **`Control (for push)`**: This test case measures the overhead of resetting the control variables when they exceed the cutoff limit. It's used as a baseline to measure the performance of other methods.
*   **`Concat`**: This test case measures the performance of using `Array.prototype.concat()` to append elements to an array.
*   **`Spread`**: This test case measures the performance of using the spread operator (`...`) for push.

**Other Alternatives**

If you're interested in exploring other approaches, here are a few examples:

*   Using `Array.prototype.push()` directly: This method is similar to `push.apply()`, but without the `apply()` call. It's likely to be slightly faster because it avoids the overhead of calling an additional function.
*   Using a library like Lodash or Ramda for array manipulation: These libraries provide optimized implementations of various array methods, including push. However, they might introduce additional overhead due to the library itself.
*   Using a different data structure, such as an immutable array or a linked list: Depending on your use case and requirements, using a different data structure might offer performance benefits.

Keep in mind that each approach has its trade-offs, and the best choice will depend on your specific use case and performance requirements.

Related benchmarks:

isoppp array proptotype push vs concat vs spread (version: 0)

Comparing the various ways to append to a large array

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

Created: one year ago by: Guest

Jump to the latest result

Control (for push)

Concat

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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