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

Script Preparation code:

window.top.tests = {control:[], concat:[], spread:[]};
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'); }
Spread
for (let element of window.test) {window.top.tests.spread = [...window.top.tests.spread, element];} 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)
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 124 on Android

View result in a separate tab

Test name	Executions per second
Control (for push)	48093.3 Ops/sec
Spread	6283.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 explanation of the provided benchmark.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark on MeasureThat.net, specifically comparing two approaches to append elements to an array: `push` and spread syntax (`...`).

**Options Compared**

Two options are compared:

1. **Control (for push)**: This approach uses the `push` method to add elements to the end of the array.
2. **Spread**: This approach uses the spread syntax (`...`) to create a new array with the added elements.

**Pros and Cons of Each Approach**

* **Control (for push)**:
	+ Pros:
		- Widely supported by most JavaScript engines.
		- Easy to understand and implement.
	+ Cons:
		- Can be slower for large arrays due to the overhead of pushing elements.
		- May cause garbage collection pauses if the array grows too large.
* **Spread**:
	+ Pros:
		- Can be faster than `push` for large arrays since it creates a new array without modifying the original one.
		- Avoids potential garbage collection issues when appending to large arrays.
	+ Cons:
		- Not all browsers support the spread syntax, and its performance can vary depending on the engine.

**Library and Purpose**

There is no explicit library mentioned in this benchmark. However, the `window.top.tests` object is used to store test results, which suggests that MeasureThat.net uses a custom framework or library for running JavaScript microbenchmarks.

**Special JS Feature/Syntax**

The benchmark does not use any special JavaScript features or syntax beyond what's commonly supported by most browsers. The focus is on comparing two standard approaches to array manipulation: `push` and spread.

**Other Alternatives**

If you're interested in exploring alternative ways to append elements to an array, here are a few options:

* **Array.prototype.push.apply()**: This method uses the `apply()` method to call `push()` with multiple arguments.
* **Array.from() + push()**: You can create a new array using `Array.from()` and then push elements onto it.

Keep in mind that these alternatives may have different performance characteristics or be more suitable for specific use cases.

Related benchmarks:

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

Comparing the various ways to append to a large array

Comparing performance of: Control (for push) vs Spread

Created: one year ago by: Guest

Jump to the latest result

Control (for push)

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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