Benchmark: Concat vs Spread for large arrays

Tests:

Spread

var params = [ "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7 ]
var params2 = [ "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7 ]
var other = [ ...params, ...params2 ]

AخA
 
var params = [ "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7 ]var params2 = [ "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7 ]var other = [ ...params, ...params2 ]

Concat

var params = [ "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7 ]
var params2 = [ "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7 ]
var other = params.concat(params2)

 
var params = [ "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7 ]var params2 = [ "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7, "hello", true, 7, "hello", true, 7, "hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7,"hello", true, 7 ]var other = params.concat(params2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Spread
Concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 85 on Linux

View result in a separate tab

Test name	Executions per second
Spread	1310325.8 Ops/sec
Concat	3676463.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

Let's break down the provided benchmark and explain what's being tested, compared, and the pros and cons of each approach.

Benchmark Definition The benchmark is defined by two test cases: "Concat" and "Spread". Both tests compare the performance of concatenating an array using the concat() method versus spreading the array into a new one using the spread operator (...).

Benchmark Script The script for both tests is identical:

var params = [...]; // large array with 50 elements
var params2 = [...]; // same as params, but with some differences (e.g., index order)
var other = [ ...params, ...params2 ]; // concatenation using concat()

Options being compared

Concat: Uses the concat() method to concatenate two arrays.
Spread: Uses the spread operator (...) to create a new array from an existing one.

Pros and Cons of each approach:

Concat:
- Pros:
  - More explicit and readable way to concatenate arrays.
  - Can be more efficient for large datasets since it avoids creating temporary arrays.
- Cons:
  - Can be slower than spread for very large arrays, as it involves creating multiple intermediate arrays.
  - Can lead to memory issues if not used carefully, especially in browsers with limited stack size.
Spread:
- Pros:
  - Often faster and more efficient than concat for large datasets.
  - Creates a new array without the need for intermediate arrays, reducing memory usage.
- Cons:
  - Can be less explicit and readable, especially for complex concatenations.
  - May not work as expected in some older browsers or environments that don't support the spread operator.

Benchmark Results The latest benchmark results show:

Concat: 3676463.75 executions per second (FPS)
Spread: 1310325.75 FPS

As expected, the "Concat" test performed better than the "Spread" test, which is likely due to the overhead of creating intermediate arrays using concat(). However, it's essential to note that this result might vary depending on the specific use case and environment.

In conclusion, while both approaches have their trade-offs, the spread operator (...) tends to be a more efficient choice for concatenating large datasets in modern JavaScript environments.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and the pros and cons of each approach.

**Benchmark Definition**
The benchmark is defined by two test cases: "Concat" and "Spread". Both tests compare the performance of concatenating an array using the `concat()` method versus spreading the array into a new one using the spread operator (`...`).

**Benchmark Script**
The script for both tests is identical:
```javascript
var params = [...]; // large array with 50 elements
var params2 = [...]; // same as params, but with some differences (e.g., index order)
var other = [ ...params, ...params2 ]; // concatenation using concat()
```
**Options being compared**

1. **Concat**: Uses the `concat()` method to concatenate two arrays.
2. **Spread**: Uses the spread operator (`...`) to create a new array from an existing one.

**Pros and Cons of each approach:**

* **Concat**:
	+ Pros:
		- More explicit and readable way to concatenate arrays.
		- Can be more efficient for large datasets since it avoids creating temporary arrays.
	+ Cons:
		- Can be slower than spread for very large arrays, as it involves creating multiple intermediate arrays.
		- Can lead to memory issues if not used carefully, especially in browsers with limited stack size.
* **Spread**:
	+ Pros:
		- Often faster and more efficient than concat for large datasets.
		- Creates a new array without the need for intermediate arrays, reducing memory usage.
	+ Cons:
		- Can be less explicit and readable, especially for complex concatenations.
		- May not work as expected in some older browsers or environments that don't support the spread operator.

**Benchmark Results**
The latest benchmark results show:

* **Concat**: 3676463.75 executions per second (FPS)
* **Spread**: 1310325.75 FPS

As expected, the "Concat" test performed better than the "Spread" test, which is likely due to the overhead of creating intermediate arrays using `concat()`. However, it's essential to note that this result might vary depending on the specific use case and environment.

In conclusion, while both approaches have their trade-offs, the spread operator (`...`) tends to be a more efficient choice for concatenating large datasets in modern JavaScript environments.

Related benchmarks:

Concat vs Spread for large arrays (version: 0)

Comparing performance of: Spread vs Concat

Created: 4 years ago by: Guest

Jump to the latest result