Benchmark: Array deconstruction vs array push

Array deconstruction vs array push (version: 0)

Shows the decremental performance when unnecessarily recreating an array when pushing new items to it.

Comparing performance of: Small test: array deconstruct vs Medium test: array deconstruct vs Large test: array deconstruct vs Small test: array push vs Medium test: array push vs Large test: array push

Created: 2 years ago by: Guest

Jump to the latest result

Script Preparation code:

var sTest = Array.apply(null, Array(100)).map(function (x, i) { return i; });
var mTest = Array.apply(null, Array(1000)).map(function (x, i) { return i; });
var lTest = Array.apply(null, Array(10000)).map(function (x, i) { return i; });

Tests:

Small test: array deconstruct
let result = [ ...sTest, 0 ];
Medium test: array deconstruct
let result = [ ...mTest, 0 ];
Large test: array deconstruct
let result = [ ...lTest, 0 ];
Small test: array push
sTest.push(0);
Medium test: array push
mTest.push(0);
Large test: array push
lTest.push(0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Small test: array deconstruct
Medium test: array deconstruct
Large test: array deconstruct
Small test: array push
Medium test: array push
Large test: array push

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark measures the performance of two approaches in JavaScript: array deconstruction and array push. The goal is to determine which approach is more efficient, especially when dealing with large arrays.

**Test Cases**

There are four test cases:

1. **Small test: array deconstruct**
	* Creates a small array (`sTest`) using `Array.apply(null, Array(100)).map(function (x, i) { return i; })`
	* Performs an array deconstruction by spreading the array and pushing a new value to it: `[...sTest, 0]`
2. **Medium test: array deconstruct**
	* Creates a medium-sized array (`mTest`) using `Array.apply(null, Array(1000)).map(function (x, i) { return i; })`
	* Performs an array deconstruction by spreading the array and pushing a new value to it: `[...mTest, 0]`
3. **Large test: array deconstruct**
	* Creates a large array (`lTest`) using `Array.apply(null, Array(10000)).map(function (x, i) { return i; })`
	* Performs an array deconstruction by spreading the array and pushing a new value to it: `[...lTest, 0]`
4. **Small test: array push**
	* Creates a small array (`sTest`) using `Array.apply(null, Array(100)).map(function (x, i) { return i; })`
	* Pushes a single element to the array: `sTest.push(0)`
5. **Medium test: array push**
	* Creates a medium-sized array (`mTest`) using `Array.apply(null, Array(1000)).map(function (x, i) { return i; })`
	* Pushes a single element to the array: `mTest.push(0)`
6. **Large test: array push**
	* Creates a large array (`lTest`) using `Array.apply(null, Array(10000)).map(function (x, i) { return i; })`
	* Pushes a single element to the array: `lTest.push(0)`

**Library and Special Features**

The benchmark uses no external libraries. There are no special JavaScript features or syntax used in this benchmark.

**Approach Comparison**

There are two main approaches being tested:

1. **Array Deconstruction**
	* This approach creates a new array by spreading the original array and pushing a new value to it.
	* The benefits of this approach include:
		+ Reduced memory allocation, as a new array is not created.
		+ Potential performance improvement due to reduced overhead from creating and copying arrays.
	* However, the drawbacks of this approach include:
		+ Increased CPU usage, as the browser needs to execute the deconstruction operation.
		+ Potential issues with caching, as the deconstructed array may be cached by the browser.
2. **Array Push**
	* This approach pushes a new element to the end of the original array.
	* The benefits of this approach include:
		+ Simplified code, as no additional operations are required beyond pushing the new value.
		+ Potential performance improvement due to reduced overhead from creating and copying arrays ( caching effects).
	* However, the drawbacks of this approach include:
		+ Increased memory allocation, as a new array is created for each push operation.
		+ Potential issues with cache locality, as the pushed element may not be stored in the same cache line as the original array.

**Performance Comparison**

The benchmark results show that the array push approach outperforms the array deconstruction approach, especially on large arrays. This suggests that pushing new elements to an existing array is more efficient than creating a new array by deconstructing the original array.

**Alternatives**

Other alternatives for improving performance when dealing with large arrays include:

1. **Array Resizing**
	* Instead of using `push()` or `unshift()`, consider resizing the array using `splice()` and setting its length to a smaller value.
2. **Buffer-Based Operations**
	* Use buffer-based operations, such as `TypedArray.prototype.set()`, for large array operations.
3. **Async Operations**
	* Consider using async operations, such as Web Workers or WebAssembly, for CPU-intensive array operations.

Keep in mind that the choice of approach depends on the specific use case and performance requirements.

Latest run results:

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

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

Browser/OS: Chrome 129 on Linux

View result in a separate tab

Test name	Executions per second
Small test: array deconstruct	5833384.0 Ops/sec
Medium test: array deconstruct	1050047.1 Ops/sec
Large test: array deconstruct	145508.8 Ops/sec
Small test: array push	14408392.0 Ops/sec
Medium test: array push	14007903.0 Ops/sec
Large test: array push	13754903.0 Ops/sec

Related benchmarks:

Array deconstruction vs array push (version: 0)

Shows the decremental performance when unnecessarily recreating an array when pushing new items to it.

Comparing performance of: Small test: array deconstruct vs Medium test: array deconstruct vs Large test: array deconstruct vs Small test: array push vs Medium test: array push vs Large test: array push

Created: 2 years ago by: Guest

Jump to the latest result

Small test: array deconstruct

Medium test: array deconstruct

Large test: array deconstruct

Small test: array push

Medium test: array push

Large test: array push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):