Benchmark: Semi deep copy | JSON stringify vs slice vs structuredClone vs spread vs Array from

Script Preparation code:

var vertices = [
      [1, 0, 0, 0],
      [0, 1, 0, 0],
      [0, 0, 1, 0],
      [0, 0, 0, 1],
    ]

var myCopy = null;

Tests:

JSON.stringify
myCopy = JSON.parse(JSON.stringify(vertices));
slice
myCopy = vertices.map(row => row.slice());
Array from
myCopy = vertices.map(row => Array.from(row))
Spread
myCopy = vertices.map(row => [...row])
structuredClone
myCopy = structuredClone(vertices)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.stringify
slice
Array from
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; rv:109.0) Gecko/20100101 Firefox/111.0

Browser/OS: Firefox 111 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
JSON.stringify	1476443.8 Ops/sec
slice	6490270.0 Ops/sec
Array from	4155363.8 Ops/sec
Spread	6255413.5 Ops/sec
structuredClone	768376.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, along with their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of different methods to create a shallow copy of an array-like object (in this case, a 3D vertex array). The goal is to determine which method is the most efficient.

**Methods Being Tested**

1. `JSON.stringify` followed by `JSON.parse`
2. `Array.prototype.slice`
3. `Array.from`
4. Spread operator (`...`)
5. `structuredClone`

**Analysis of Each Method**

### 1. `JSON.stringify` followed by `JSON.parse`

* **Pros**: Easy to implement and widely supported. Can be used as a fallback if other methods are not available.
* **Cons**: Creates a deep copy, which may not be necessary for shallow copies. Can result in slower performance due to the additional parsing step.

**Implementation**: `myCopy = JSON.parse(JSON.stringify(vertices));`

### 2. `Array.prototype.slice`

* **Pros**: Fast and efficient, as it uses a native method optimized for performance.
* **Cons**: Only creates a shallow copy, which may not be suitable for all use cases.

**Implementation**: `myCopy = vertices.map(row => row.slice());`

### 3. `Array.from` ( Introduced in ES6+ )

* **Pros**: Fast and efficient, as it uses a native method optimized for performance.
* **Cons**: Requires modern browsers or support for the feature. Creates a shallow copy.

**Implementation**: `myCopy = vertices.map(row => Array.from(row));`

### 4. Spread operator (`...`)

* **Pros**: Modern and concise syntax. Fast and efficient, as it uses a native method optimized for performance.
* **Cons**: Requires modern browsers or support for the feature.

**Implementation**: `myCopy = [...vertices];`

### 5. `structuredClone` ( Introduced in ES2022 )

* **Pros**: Specifically designed for deep copying arrays and other objects. Fast and efficient, as it uses a native method optimized for performance.
* **Cons**: Only available in modern browsers or support the feature.

**Implementation**: `myCopy = structuredClone(vertices);`

**Library Used**

None explicitly mentioned, but all methods rely on underlying browser implementations of JavaScript features. The main library involved is the Web API (Web Application Programming Interface) and the ECMAScript specification.

**Other Considerations**

* **Device Platform**: The benchmark was run on a Mac desktop with Firefox 111. This may affect the results due to differences in hardware, software, or compiler optimizations.
* **Device Platform-Specific Features**: Firefox 111 has some device platform-specific features that may impact performance, such as WebAssembly support or Canvas acceleration.

**Alternatives**

For this specific use case (shallow copy of an array-like object), other alternatives might include:

* `Array.prototype.map` with a callback function
* Using a dedicated deep copying library like Lodash's `cloneDeep`
* Using a binary serialization method, such as serialization to a binary buffer and deserialization

Keep in mind that each alternative will have its own pros and cons, depending on the specific requirements of your project.

Related benchmarks:

Semi deep copy | JSON stringify vs slice vs structuredClone vs spread vs Array from (version: 0)

Comparing performance of: JSON.stringify vs slice vs Array from vs Spread vs structuredClone

Created: one year ago by: Guest

Jump to the latest result

JSON.stringify

slice

Array from

Spread

structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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