Benchmark: Deep clone performance comparison

Script Preparation code:

var obj = {a: "hello", c: "test", po: 33, arr: [1, 2, 3, 4], anotherObj: {a: 33, str: "whazzup"}};

Tests:

JSON stringify and parse
const obj1 = JSON.parse(JSON.stringify(obj));
structuredClone
const obj2 = structuredClone(obj);
Destructuring and Restructuring
const obj3 = { ...obj };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON stringify and parse
structuredClone
Destructuring and Restructuring

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 127 on Windows

View result in a separate tab

Destructuring and Restructuring

16.0M/s

JSON stringify and parse

1.2M/s

structuredClone

693K/s

View exact numbers

Test name	Executions per second
✓ Destructuring and Restructuring	15,998,959 Ops/sec
JSON stringify and parse	1,155,466 Ops/sec
structuredClone	692,880 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 world of JavaScript microbenchmarks!

**Benchmark Definition and Preparation Code**

The provided JSON represents a benchmark named "Deep clone performance comparison". The script preparation code is:
```javascript
var obj = {a: "hello", c: "test", po: 33, arr: [1, 2, 3, 4], anotherObj: {a: 33, str: "whazzup"}};
```
This code creates an object `obj` with various properties and values. The object contains a nested object `anotherObj`, which is not cloned in the benchmark.

The purpose of this benchmark is to measure the performance of different methods for creating a deep clone of the `obj` object.

**Options Compared**

Three options are compared:

1. **JSON.stringify() + JSON.parse()**: This method uses the built-in `JSON.stringify()` function to convert the object into a string, and then parses it back into an object using `JSON.parse()`.
2. **structuredClone()**: This is a newer method introduced in JavaScript, which creates a deep clone of an object without converting it to a string.
3. **Destructuring and Restructuring (Spread operator)**: This method uses the spread operator (`{ ...obj }`) to create a new object by copying the properties from `obj`.

**Pros and Cons**

Here's a brief overview of each option:

1. **JSON.stringify() + JSON.parse()**:
	* Pros: widely supported, easy to implement.
	* Cons: can be slow for large objects, requires parsing twice (string conversion and then object creation).
2. **structuredClone()**:
	* Pros: fast, efficient, and modern way of creating deep clones.
	* Cons: requires modern browsers or Node.js environments that support `structuredClone`.
3. **Destructuring and Restructuring (Spread operator)**:
	* Pros: simple, efficient, and widely supported.
	* Cons: only works for objects with enumerable properties.

**Other Considerations**

When choosing a method for creating deep clones, consider the size of the object, the complexity of its nested structures, and the performance requirements of your application. For small to medium-sized objects, the spread operator might be sufficient. However, for larger or more complex objects, `structuredClone()` might be a better choice.

**Library Used**

The `structuredClone()` method is not a built-in function in JavaScript until ECMAScript 2022 (JavaScript version 12). However, it's implemented in some browsers and Node.js environments, starting from version 14.0.0.

**Special JS Feature or Syntax**

None of the options mentioned require special JavaScript features or syntax beyond what's commonly used in modern web development.

Now that we've explored the benchmark, let's take a look at the results:

The latest benchmark result shows that the "Destructuring and Restructuring" option (using the spread operator) outperforms the other two methods. The "structuredClone()" method is not supported by older browsers or Node.js environments, but it's a modern way of creating deep clones.

If you're interested in exploring alternative approaches, consider using libraries like Lodash, which provides a `cloneDeep()` function for creating deep copies of objects. Alternatively, you can use other methods, such as the `JSON.parse(JSON.stringify(obj))` approach or even custom functions for cloning specific types of data structures.

Deep clone performance comparison (version: 0)

Comparing performance of: `JSON stringify and parse vs structuredClone vs Destructuring and Restructuring`

Created: 3 years ago by: Guest

Go to the latest result

JSON stringify and parse

structuredClone

Destructuring and Restructuring

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Deep clone performance comparison (version: 0)

Comparing performance of: JSON stringify and parse vs structuredClone vs Destructuring and Restructuring

Created: 3 years ago by: Guest

Go to the latest result

JSON stringify and parse

structuredClone

Destructuring and Restructuring

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: `JSON stringify and parse vs structuredClone vs Destructuring and Restructuring`