Benchmark: Deep Clone vs JSON.Stringify

Script Preparation code:

var obj = {};
var objCount = 100;

for (let i = 0; i < objCount; i++) {
    obj[i] = [1, 2, 3];
}

function deepClone(objIn) {
    let copy;

    if (objIn === null || typeof objIn !== 'object') {
        return obj;
    }

    if (objIn instanceof Array) {
        copy = [];
        for (let i = 0, len = objIn.length; i < len; i++) {
            copy[i] = deepClone(objIn[i]);
        }
        return copy;
    }

    if (objIn instanceof Object) {
        copy = {};
        for (const attr in objIn) {
            if (objIn.hasOwnProperty(attr)) {
                copy[attr] = deepClone(objIn[attr]);
            }
        }
        return copy;
    }

}

Tests:

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

Historical Performance Data aggregated from 30 community runs

Desktop Results:

Chrome 30 runs

JSON.stringify

57K/s

DeepClone

18K/s

Fastest: JSON.stringify (3.2x faster)

View exact numbers

✓ JSON.stringify: 56,941 ops/sec
• DeepClone: 17,562 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Windows

View result in a separate tab

DeepClone

246K/s

JSON.stringify

139K/s

View exact numbers

Test name	Executions per second
✓ DeepClone	246,233 Ops/sec
JSON.stringify	138,912 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark on MeasureThat.net, comparing the performance of two approaches: Deep Clone and JSON.stringify. The benchmark creates an object with 100 properties, each containing an array of three elements, and then clones this object using either the `deepClone` function or the `JSON.parse(JSON.stringify(obj))` method.

**Deep Clone vs JSON.stringify**

The `deepClone` function is a custom implementation that recursively copies the object's properties, ensuring that all nested objects and arrays are cloned correctly. The `JSON.stringify` method, on the other hand, uses the browser's native serialization algorithm to convert the object into a JSON string, which can then be parsed back into an object using the `JSON.parse()` method.

**Options compared**

The benchmark compares two options:

1. **Deep Clone**: A custom function that recursively clones the object's properties.
2. **JSON.stringify + JSON.parse**: Uses the browser's native serialization algorithm followed by parsing the resulting string back into an object.

**Pros and Cons of each approach**

* **Deep Clone**:
	+ Pros: Can handle complex objects with nested arrays and objects, provides a controlled and predictable cloning process.
	+ Cons: May be slower than JSON.stringify due to its recursive nature, and may not be optimized for performance.
* **JSON.stringify + JSON.parse**:
	+ Pros: Fast and efficient, as it leverages the browser's native serialization algorithm.
	+ Cons: May not handle complex objects correctly (e.g., circular references), requires parsing the resulting string back into an object.

**Library**

In this benchmark, there is no external library used. The `deepClone` function is a custom implementation provided by the test author.

**Special JavaScript feature or syntax**

None are mentioned in this specific benchmark. However, it's worth noting that MeasureThat.net often uses special features like Web Workers, async/await, and Promises to create complex benchmarks.

**Other alternatives**

If you're interested in exploring alternative cloning methods, here are a few options:

* **Lodash.cloneDeep**: A popular utility library function for deep cloning objects.
* **JSON3.parse**: A fast and efficient way to parse JSON strings into objects.
* **Object.assign**: Can be used to merge two objects, but may not provide the same level of control as `deepClone`.

Keep in mind that each alternative has its own trade-offs and performance characteristics, so it's essential to evaluate them based on your specific use case.

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

Comparing performance of: `DeepClone vs JSON.stringify`

Created: 4 years ago by: Guest

Go to the latest result

DeepClone

JSON.stringify

Historical Performance Data aggregated from 30 community runs

Desktop Results:

Chrome 30 runs

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 vs JSON.Stringify (version: 0) Benchmark.js

Comparing performance of: DeepClone vs JSON.stringify

Created: 4 years ago by: Guest

Go to the latest result

DeepClone

JSON.stringify

Historical Performance Data aggregated from 30 community runs

Desktop Results:

Chrome 30 runs

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`