Benchmark: LargeObject Lodash cloneDeep vs structuredClone vs JSON Parse

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var MyObject = {
    a: _.range(1000).map(i => ({
        foo: {
            a: 123,
            b: 456,
            bar: {
                a: 123,
                b: 456,
            }
        }
    })),
    b: {
        a: 123,
        b: 456,
        c: {
            a: 123,
            b: 456,
            c: {
                a: 123,
                b: 456,
                c: {
                    a: 123,
                    b: 456,
                    c: _.range(1000).map(i => ({
                        a: 123,
                        b: 456
                    }))
                }
            }
        }
    }

};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Native structuredClone
myCopy = structuredClone(MyObject);
JSON Parse
myCopy = JSON.parse(JSON.stringify(MyObject));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
JSON Parse

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/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	836.2 Ops/sec
Native structuredClone	1039.0 Ops/sec
JSON Parse	1626.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare three different methods for cloning a complex JavaScript object:

1. `structuredClone`
2. `JSON Parse` (using `JSON.stringify` and `JSON.parse`)
3. `Lodash cloneDeep`

**Options Compared**

* `structuredClone`: a native method introduced in ECMAScript 2020, designed to create deep copies of objects while preserving all properties, including functions.
* `JSON Parse`: using `JSON.stringify` to serialize the object and then parsing it back into a new object. This method may not work correctly with circular references or nested functions.
* `Lodash cloneDeep`: a utility function from the Lodash library that recursively clones objects.

**Pros and Cons of Each Approach**

* **structuredClone**: Pros:
	+ Efficient and optimized for performance
	+ Preserves all properties, including functions
	+ Works well with complex objects
Cons: Not yet supported in older browsers or environments.
* **JSON Parse**: Pros:
	+ Wide browser support
	+ Easy to implement
Cons:
	+ May not work correctly with circular references or nested functions
	+ Can be slower than structuredClone for large objects
* `Lodash cloneDeep`: Pros:
	+ Well-tested and widely used library
	+ Works well with complex objects
Cons: Adds an external dependency (Lodash)
	+ May have performance implications due to recursive cloning

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides a collection of functional programming helpers, including `cloneDeep`, which is specifically designed for deep cloning objects. The benchmark uses the 4.17.5 version of Lodash.

**Special JS Feature/Syntax**

None mentioned in the provided code snippets.

**Benchmark Results**

The latest benchmark results show that:

1. **JSON Parse**: fastest execution per second (1626.173583984375)
2. **Native structuredClone**: second-fastest execution per second (1039.04345703125)
3. **Lodash cloneDeep**: slowest execution per second (836.2434692382812)

These results suggest that `structuredClone` is the most efficient method for cloning complex objects, followed closely by `JSON Parse`, and then `Lodash cloneDeep`.

**Alternatives**

Other alternatives to these methods include:

* **Object.assign()`: a built-in method in modern browsers and environments that can be used to create shallow copies of objects.
* **Array.prototype.slice()` or `Array.prototype.concat()`: can be used to create shallow copies of arrays, but may not work correctly with nested objects.
* **Manual cloning using loops**: an alternative approach that involves manually creating a new object by iterating over the original object's properties and values.

However, these alternatives have their own trade-offs in terms of performance, complexity, and browser support.

Related benchmarks:

LargeObject Lodash cloneDeep vs structuredClone vs JSON Parse (version: 0)

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs JSON Parse

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON Parse

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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