Benchmark: JSON.stringify vs Deep Clone

Script Preparation code:

var obj = {};
var objCount = 100;

for (let i = 0; i < objCount; i++) {
    obj[i] = [1, 2, 3];
}

function deepClone(source) {
   return Array.isArray(source)
    ? source.map((item) => deepClone(item))
    : source && typeof source === "object"
    ? Object.getOwnPropertyNames(source).reduce((o, prop) => {
        o[prop] = deepClone(source[prop]);
        return o;
      }, Object.create(Object.getPrototypeOf(source)))
    : source;
}

Tests:

DeepClone
var clone = deepClone(obj);
JSON.stringify
var clone = JSON.parse(JSON.stringify(obj));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DeepClone
JSON.stringify

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:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Windows

View result in a separate tab

DeepClone

109K/s

JSON.stringify

103K/s

View exact numbers

Test name	Executions per second
✓ DeepClone	109,355 Ops/sec
JSON.stringify	103,246 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 explanation of the provided benchmark.

**Benchmark Definition**

The benchmark tests two different approaches to cloning an object in JavaScript: `JSON.stringify` and a custom implementation using recursion, which we'll refer to as "DeepClone".

**Options Compared**

The two options being compared are:

1. **JSON.stringify**: This method creates a new JSON string representation of the object, including its structure, but it does not clone the actual object. The cloned object is a new one, with the same properties and values, but it's not a copy of the original.
2. **DeepClone**: This is a custom implementation that recursively clones the object by creating a deep copy of all its nested properties.

**Pros and Cons**

**JSON.stringify:**

Pros:

* Simple to implement
* Fast, as it only involves serializing the object to a string

Cons:

* Does not create a true copy of the object; instead, it creates a new object with the same structure but potentially different values (if the original object contains functions or other non-serializable values).
* Not suitable for cloning complex objects that contain recursive references.

**DeepClone:**

Pros:

* Creates a true copy of the object, including all its nested properties and references.
* Suitable for cloning complex objects with recursive references.

Cons:

* More complex to implement than `JSON.stringify`.
* Slower than `JSON.stringify`, as it involves recursively traversing the object's structure and creating new copies of each property.

**Library Used**

In this benchmark, the custom implementation "DeepClone" uses a recursive approach to clone the object. It checks if the source is an array or an object, and then recursively calls itself on each property. The `Object.getOwnPropertyNames` method is used to get all properties (including non-enumerable ones) of the object.

**Special JS Feature/Syntax**

None mentioned in this benchmark.

Now, let's look at the individual test cases:

1. **JSON.stringify**: This test case creates a deep clone of an object using `JSON.parse(JSON.stringify(obj))`. The resulting cloned object is then compared to the original object.
2. **DeepClone**: This test case uses the custom implementation "DeepClone" to create a copy of the same object, and then compares it to the original object.

**Other Alternatives**

Some other alternatives for cloning objects in JavaScript include:

* Using the `Array.prototype.slice()` method to clone arrays
* Using a library like Lodash's `cloneDeep` function
* Using a simple object assignment approach with `Object.assign()`

Note that these alternatives may have different trade-offs in terms of performance, complexity, and suitability for specific use cases.

JSON.stringify vs Deep Clone (version: 0) Benchmark.js

Comparing performance of: `DeepClone vs JSON.stringify`

Created: 3 years ago by: Guest

Go to the latest result

DeepClone

JSON.stringify

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JSON.stringify vs Deep Clone (version: 0) Benchmark.js

Comparing performance of: DeepClone vs JSON.stringify

Created: 3 years ago by: Guest

Go to the latest result

DeepClone

JSON.stringify

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: `DeepClone vs JSON.stringify`