Benchmark: Deep Clone vs JSON.Stringify vs structuredClone

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));
structuredClone
var clone = structuredClone(obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DeepClone
JSON.stringify
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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

DeepClone

191K/s

JSON.stringify

103K/s

structuredClone

63K/s

View exact numbers

Test name	Executions per second
✓ DeepClone	191,249 Ops/sec
JSON.stringify	103,286 Ops/sec
structuredClone	62,679 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 benchmarking test.

**What is being tested?**

The provided JSON represents a benchmark test that compares three approaches for creating deep clones of JavaScript objects:

1.  `structuredClone()`
2.  `JSON.stringify()` with `JSON.parse()` (a common technique for cloning objects in older browsers)
3.  A custom `deepClone()` function implemented by the user.

**Options compared:**

*   **`structuredClone()`**: This is a relatively new JavaScript feature introduced in ECMAScript 2022, which provides a way to create a shallow clone of an object without copying the object's prototype chain or its own properties. It achieves this by creating a new object and then recursively cloning each property value.
*   **`JSON.stringify()` with `JSON.parse()`**: This approach serializes the original object into a JSON string, converts the string back into a JavaScript object, and assigns it to a new variable (the clone). Note that this method doesn't create a true copy of the original object; instead, it creates a new reference to the same object in memory.
*   **Custom `deepClone()` function**: This is a user-implemented function that recursively clones an object by creating new objects for each property and its value.

**Pros and cons of each approach:**

1.  **`structuredClone()`**:
    *   Pros: Fast, efficient, and safe (no need to worry about the original object's prototype chain or own properties).
    *   Cons: Only available in modern browsers and JavaScript engines that support ECMAScript 2022.
2.  **`JSON.stringify()` with `JSON.parse()`**:
    *   Pros: Widely supported across older browsers, easy to implement, and fast (for small objects).
    *   Cons: Can be slow for large objects due to the serialization process, may not work correctly with certain types of objects, and can create new references instead of true copies.
3.  **Custom `deepClone()` function**:
    *   Pros: Can be optimized for performance, allows for more control over the cloning process, and works in older browsers that don't support `structuredClone()`.
    *   Cons: Requires manual implementation and maintenance, may not work correctly with all types of objects or edge cases.

**Other considerations:**

*   **Object size**: The choice of cloning method can impact performance when dealing with large objects. `JSON.stringify()` can be slow for very large objects due to the serialization process.
*   **Browser support**: If you need to support older browsers, consider using `JSON.stringify()` or a custom implementation like `deepClone()`.
*   **Security**: Be cautious when using `structuredClone()` if you're working with untrusted data sources, as it can create new objects in memory.

**Library usage:**

There is no library explicitly mentioned in the provided code. However, `structuredClone()` relies on the built-in JavaScript method of the same name, which was added in ECMAScript 2022.

**Special JS features or syntax:**

The benchmark uses `ECMAScript 2022` for testing, but it does not explicitly mention any other advanced JavaScript features or syntax.

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

Comparing performance of: `DeepClone vs JSON.stringify vs structuredClone`

Created: 3 years ago by: Guest

Go to the latest result

DeepClone

JSON.stringify

structuredClone

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

Comparing performance of: DeepClone vs JSON.stringify vs structuredClone

Created: 3 years ago by: Guest

Go to the latest result

DeepClone

JSON.stringify

structuredClone

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 vs structuredClone`