Benchmark: Concat vs push(...) vs push.apply for large arrays

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'); }
Push.apply
window.top.tests.pushapply.push.apply(window.top.tests.pushapply, window.test); if (window.top.tests.spread.length > window.cutoff) { window.top.tests.pushapply = []; console.log('reset pushapply'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Control (for push)
Concat
Spread
Push.apply

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
Control (for push)	114616.9 Ops/sec
Concat	104379.0 Ops/sec
Spread	452558.6 Ops/sec
Push.apply	303714.0 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 world of JavaScript microbenchmarks and explore what's being tested in this benchmark.

**Benchmark Purpose:**
The benchmark is designed to compare the performance of three different methods for appending elements to an array:

1. `push()`
2. `concat()`
3. `push.apply()` (also known as using `push()` with `apply()`)

These methods are commonly used in JavaScript development, and understanding their performance differences can be crucial for optimizing code.

**Method Comparisons:**

* **`push()`**: This method involves pushing a new element onto the end of an array. The performance of `push()` is often considered to be relatively slow due to its overhead.
* **`concat()`**: This method creates a new array by concatenating two or more arrays together and returns the result. While it's generally faster than `push()`, its performance can degrade for very large arrays, as it involves creating a new array object.
* **`push.apply()` (with `apply()`)**: This method uses the `push()` function with the `apply()` method to push multiple elements onto an array in a single operation. It's often considered the fastest of the three methods.

**Pros and Cons:**

* **`push()`**: Pros - simple, widely supported. Cons - slow performance.
* **`concat()`**: Pros - relatively fast, can be used for large arrays. Cons - creates new array object, slower than `push.apply()`.
* **`push.apply()` (with `apply()`)**: Pros - fastest, most efficient way to push multiple elements onto an array. Cons - may require more memory allocation.

**Library and Special JS Features:**

There are no libraries mentioned in the benchmark, but it's worth noting that some JavaScript engines may provide optimizations for certain methods, such as `push.apply()`, which can impact performance.

**Other Considerations:**

* Memory allocation and deallocation can have a significant impact on performance.
* The size of the array being appended to can affect the performance differences between these methods.
* Some JavaScript engines may provide specialized optimization techniques, such as using SIMD instructions or reducing allocation overhead, that can influence the results.

**Alternatives:**
For similar microbenchmarks, you might want to consider:

* Comparing `splice()` vs. `push()` vs. `unshift()`
* Evaluating the performance of different array data structures, such as `Set` vs. `Map`
* Measuring the performance of different algorithms for common use cases, like sorting or searching arrays

Keep in mind that benchmarking can be an art and a science, and results may vary depending on the JavaScript engine, platform, and other factors.

Related benchmarks:

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

Comparing the various ways to append to a large array

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

Created: 2 years ago by: Guest

Jump to the latest result

Control (for push)

Concat

Spread

Push.apply

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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