Benchmark: Lodash cloneDeep vs structuredClone vs JSON-Clone

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 = {
    description: 'Creates a deep copy of source, which should be an object or an array.',
    myNumber: 123456789,
    myBoolean: true,
    jayson: {
        stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
        parse: 'JSON.parse() method parses a JSON string...'
    }
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(myObject);
Native structuredClone
myCopy = structuredClone(myObject);
JSON-Clone
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-Clone

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

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	2610205.8 Ops/sec
Native structuredClone	1041114.1 Ops/sec
JSON-Clone	2160000.0 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!

**What is tested?**

The provided JSON represents three test cases:

1. **Lodash cloneDeep**: Measures the performance of Lodash's `cloneDeep` function, which creates a deep copy of an object.
2. **Native structuredClone**: Tests the native `structuredClone` function in Firefox 111, which also creates a deep copy of an object. This is a relatively new feature introduced in recent versions of Firefox.
3. **JSON-Clone**: Compares the performance of using the `JSON.stringify()` and `JSON.parse()` functions to create a deep copy of an object.

**Options compared**

The benchmark compares the performance of three different approaches:

* Lodash's `cloneDeep` function
* The native `structuredClone` function (only available in Firefox 111)
* Using `JSON.stringify()` and `JSON.parse()` functions to create a deep copy

**Pros and Cons of each approach:**

1. **Lodash cloneDeep**:
	* Pros: Well-maintained, widely supported, and easy to use.
	* Cons: May introduce additional dependencies (Lodash), and its implementation may not be optimized for performance.
2. **Native structuredClone**:
	* Pros: Optimized for performance by the browser itself, reducing overhead.
	* Cons: Only available in recent versions of Firefox, which might limit compatibility.
3. **JSON-Clone**:
	* Pros: Lightweight, easy to implement, and widely supported across browsers.
	* Cons: May introduce additional function calls and parsing overhead.

**Library usage**

The benchmark uses Lodash (version 4.17.5) as a library for the `cloneDeep` function.

**Special JS feature or syntax**

None mentioned in this particular benchmark.

**Other considerations**

When choosing a method for deep copying objects, consider factors such as:

* Performance: If you need to create multiple copies quickly, native functions like `structuredClone` might be more efficient.
* Compatibility: Ensure the method is supported by your target browsers and versions.
* Dependencies: Be mindful of adding external libraries (like Lodash) if performance is a concern.

**Alternatives**

If you're looking for alternative deep copying methods:

1. **Object.assign()**: Creates a shallow copy, but can be modified using `Object.assign()` with an object literal.
2. **Array.prototype.slice()**: Suitable for arrays, but not for objects or other complex data structures.
3. **manual iteration**: Use a loop to create a new object by copying each property individually.

Keep in mind that these alternatives might have different performance characteristics and compatibility issues compared to the methods tested in this benchmark.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs JSON-Clone (version: 0)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs JSON-Clone

Created: 3 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON-Clone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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