Benchmark: Spread Operator vs structuredClone

Script Preparation code:

var array = new Array(100000000).fill(0);

Tests:

spread
[...array];
structuredClone
structuredClone(array);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
spread	7.7 Ops/sec
structuredClone	0.1 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the JavaScript microbenchmark on MeasureThat.net.

**What is being tested?**

The benchmark compares two approaches to creating and manipulating arrays in JavaScript: the spread operator (`[...array]`) and `structuredClone(array)` (introduced in ECMAScript 2019). The test creates a large array of 100 million zeros using `new Array(100000000).fill(0)`, and then uses each approach to create a new array with the same elements.

**Options compared:**

1. **Spread operator (`[...array]`)**: This method creates a new array by copying all elements from the original array into a new array.
2. **`structuredClone(array)`**: This method creates a deep copy of an object or array, including its properties and nested objects.

**Pros and Cons of each approach:**

1. **Spread operator (`[...array]`)**:
	* Pros:
		+ Fast and efficient for small to medium-sized arrays.
		+ Simple and intuitive syntax.
	* Cons:
		+ Can be slower and less efficient for very large arrays, due to the need to create a new array object.
2. **`structuredClone(array)`**:
	* Pros:
		+ More efficient than the spread operator for large arrays, as it avoids the overhead of creating a new array object.
		+ Supports deep copying of objects and arrays, including nested objects.
	* Cons:
		+ Introduced in ECMAScript 2019, so not supported by older browsers or environments.
		+ Can be slower than the spread operator for small to medium-sized arrays.

**Other considerations:**

1. **Library usage**: The test uses the `structuredClone` function, which is a built-in JavaScript function introduced in ECMAScript 2019.
2. **Special JS features/syntax**: This benchmark doesn't use any special JavaScript features or syntax beyond what's supported by modern browsers and environments.

**Alternative approaches:**

1. **Array.prototype.slice() + Array.prototype.concat()**: Instead of using the spread operator, you could use `Array.prototype.slice()` to create a shallow copy of the array and then concatenate it with an empty array using `Array.prototype.concat()`. This approach would be slower than the spread operator but still more efficient than `structuredClone`.
2. **Manual loop-based copying**: You could implement a manual loop-based copying mechanism, where you iterate over each element in the original array and push it into a new array. This approach would be even slower than the spread operator but provides fine-grained control.

Keep in mind that these alternative approaches are less efficient and more verbose than the spread operator or `structuredClone`, making them less suitable for production code.

Related benchmarks:

Spread Operator vs structuredClone (version: 0)

Spread Operator vs structuredClone

Comparing performance of: spread vs structuredClone

Created: 2 years ago by: Guest

Jump to the latest result

spread

structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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