Benchmark: array merging performance comparison

Tests:

spread
const original = [] for (let i=0; i<=1000; i++) { original.push({i}) } const result = {list: []} do { const toMerge = original.splice(0, 100) result.list = [...result.list, ...toMerge] } while (original.length > 0)
concat
const original = [] for (let i=0; i<=1000; i++) { original.push({i}) } const result = {list: []} do { const toMerge = original.splice(0, 100) result.list = result.list.concat(toMerge) } while (original.length > 0)
splice
const original = [] for (let i=0; i<=1000; i++) { original.push({i}) } const result = {list: []} do { const toMerge = original.splice(0, 100) result.list.splice(result.list.length, 0, ...toMerge) } while (original.length > 0)
push
const original = [] for (let i=0; i<=1000; i++) { original.push({i}) } const result = {list: []} do { const toMerge = original.splice(0, 100) result.list.push(...toMerge) } while (original.length > 0)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
concat
splice
push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 149 on Windows

View result in a separate tab

Test name	Executions per second
spread	23005.5 Ops/sec
concat	60890.7 Ops/sec
splice	60872.8 Ops/sec
push	91437.7 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 on MeasureThat.net.

**Benchmark Overview**

The benchmark measures the performance of four different ways to merge an array in JavaScript: `concat`, `push`, `splice`, and `spread`. The benchmark creates an array of 1000 objects and then repeatedly merges a chunk of 100 elements into another array. The merged arrays are stored in separate variables, which are used as input for the next iteration.

**Options Compared**

The four options compared are:

1. `concat`: Using the `concat()` method to merge two arrays.
2. `push`: Using the `push()` method to add elements to an array and then creating a new array from the existing one using `Array.from()`.
3. `splice`: Using the `splice()` method to remove elements from an array, create a new array from the removed elements, and then concatenate it with the original array.
4. `spread`: Using the spread operator (`...`) to merge two arrays.

**Pros and Cons**

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

1. `concat`:
	* Pros: Simple, efficient, and widely supported.
	* Cons: Can lead to memory issues if the input array is large and the `concat()` method creates a new array that exceeds the maximum allowed size in JavaScript engines.
2. `push`:
	* Pros: Efficient for small arrays and can avoid memory issues by creating an empty array before pushing elements.
	* Cons: Creates an intermediate array, which can lead to performance issues if not done efficiently.
3. `splice`:
	* Pros: Can be efficient for large input arrays since it only removes elements from the original array.
	* Cons: Requires more operations compared to `concat`, and the removed elements are stored in a new array.
4. `spread`:
	* Pros: Efficient, concise, and widely supported.
	* Cons: Can lead to memory issues if the input array is large, as it creates an intermediate array.

**Library Usage**

There are no external libraries used in this benchmark, which is likely due to the simplicity of the operations performed.

**Special JS Feature/Syntax**

None of the test cases use any special JavaScript features or syntax beyond standard ES6 features. The spread operator (`...`) is used to merge arrays, but it's a widely supported and well-documented feature.

**Alternatives**

If you're interested in exploring alternative approaches, consider using:

1. `Array.prototype.reduce()`: A more functional approach to merging arrays by reducing the input array to a single value.
2. `Array.prototype.slice()`: Creating an empty array using `slice()` and then adding elements to it can be another efficient approach.
3. Custom implementation: Depending on your specific requirements, you might want to implement your own array merging algorithm from scratch.

Keep in mind that performance differences between these approaches may be negligible for small input sizes. However, as the input size grows, more efficient algorithms like `splice` or custom implementations might become necessary to avoid performance bottlenecks.

Related benchmarks:

array merging performance comparison (version: 0)

Comparing performance of: spread vs concat vs splice vs push

Created: 4 years ago by: Guest

Jump to the latest result

spread

concat

splice

push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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