Benchmark: structuredClone vs spread syntax without arrays

Script Preparation code:

var voucher = {
    "single": false,
    "applyOverTaxes": false,
    "discountType": "1",
    "value": 100,
    "minimumAmount": 0,
    "quantity": 1,
    "suffixLength": 8,
    "code": "IF5R0AFX",
    "startDate": "2020-10-21T00:00:00.000Z",
    "endDate": "2020-10-21T00:00:00.000Z",
    "applyed": false
}

Tests:

window.structuredClone
const copy = window.structuredClone(voucher);
Spread syntax
const copy = { ...voucher };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
window.structuredClone
Spread syntax

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Firefox 144 on Windows

View result in a separate tab

Spread syntax

10.6M/s

window.structuredClone

909K/s

View exact numbers

Test name	Executions per second
✓ Spread syntax	10,609,961 Ops/sec
window.structuredClone	908,538 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches to create a copy of an object:

1. `structuredClone` (a built-in JavaScript method) vs
2. Spread syntax (`{ ... voucher }`) without using arrays.

**Structured Clone Method**

The `structuredClone` method was introduced in ECMAScript 2020 as a way to create a shallow clone of an object, preserving its properties and values. This method is designed to be more efficient and safer than traditional methods like `Object.assign()` or `Array.prototype.slice()`, which can lead to unexpected behavior due to shallow copying.

The purpose of this benchmark is to measure the performance difference between using `structuredClone` and spread syntax in creating a copy of an object.

**Spread Syntax**

The spread syntax (`{ ... voucher }`) is another way to create a shallow clone of an object by spreading its properties into a new object. This approach is more concise but may have performance implications depending on the object's size and complexity.

**Pros and Cons**

* **Structured Clone Method:**
	+ Pros:
		- More efficient in terms of memory allocation and copying.
		- Preserves property names, values, and prototypes.
		- Safer than traditional methods due to shallow cloning.
	+ Cons:
		- Less familiar to developers (not widely adopted yet).
		- May have compatibility issues with older browsers or environments.
* **Spread Syntax:**
	+ Pros:
		- More concise and readable.
		- Well-supported in modern browsers and environments.
	+ Cons:
		- May lead to performance issues for large objects due to shallow copying.

**Other Considerations**

Both approaches have their trade-offs. If you need a deep clone (preserving the prototype chain), `structuredClone` is likely a better choice. However, if you're working with small to medium-sized objects and readability is more important than performance, spread syntax might be sufficient.

**Library:**

The `structuredClone` method uses the V8 JavaScript engine's internal cloning algorithm, which is not exposed as an API. It's implemented as a built-in method in modern browsers and environments that support it.

In the benchmark, the library being tested is essentially the browser's or environment's implementation of `structuredClone`, as it's not explicitly listed.

**Special JS Feature:**

The `structuredClone` method uses a special JavaScript feature called "async iterators" to improve performance. It leverages the ability of some engines (like V8) to use async iterators for efficient cloning. This is an advanced feature that may require specific engine support or configuration.

Keep in mind that this benchmark is designed to measure performance differences between two approaches, not to test specific features or syntaxes. The results can help developers understand the trade-offs between `structuredClone` and spread syntax when working with objects.

structuredClone vs spread syntax without arrays (version: 0)

Comparing performance of: `window.structuredClone vs Spread syntax`

Created: 3 years ago by: Guest

Go to the latest result

window.structuredClone

Spread syntax

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

structuredClone vs spread syntax without arrays (version: 0)

Comparing performance of: window.structuredClone vs Spread syntax

Created: 3 years ago by: Guest

Go to the latest result

window.structuredClone

Spread syntax

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `window.structuredClone vs Spread syntax`