Benchmark: Lodash cloneDeep vs structuredClone vs JSON Parse (100 000 objects)

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 = [];
for (let i=0; i<100000; i++) {MyObject.push({
  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 Parse
myCopy = JSON.parse(JSON.stringify(MyObject));

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

JSON Parse

16/s

Lodash cloneDeep

11/s

Native structuredClone

11/s

Fastest: JSON Parse (1.6x faster)

View exact numbers

✓ JSON Parse: 16 ops/sec
• Lodash cloneDeep: 11 ops/sec
• Native structuredClone: 11 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
Lodash cloneDeep
Native structuredClone
JSON Parse

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 29 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36 Edg/150.0.0.0

Browser/OS: Chrome 150 on Mac OS X 10.15.7

View result in a separate tab

JSON Parse

26/s

Lodash cloneDeep

15/s

Native structuredClone

14/s

View exact numbers

Test name	Executions per second
✓ JSON Parse	26 Ops/sec
Lodash cloneDeep	15 Ops/sec
Native structuredClone	14 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is testing three approaches to create a deep copy of an object:

1. Lodash's `cloneDeep` function
2. The native `structuredClone` API (introduced in Chrome 127)
3. The `JSON.parse(JSON.stringify())` method

**Options Compared**

* Lodash's `cloneDeep`: a popular JavaScript library for functional programming, providing a way to create deep copies of objects.
* Native `structuredClone`: a new feature introduced in Chrome 127 that allows creating deep copies of complex data structures, including objects and arrays.
* `JSON.parse(JSON.stringify())`: a built-in JavaScript method that converts a value to a JSON string and then parses it back into an object. This method is not suitable for creating deep copies, as it only clones the top-level properties and does not recursively copy nested objects.

**Pros and Cons of Each Approach**

1. Lodash's `cloneDeep`:
	* Pros: widely supported, well-tested, and easy to use.
	* Cons: adds an extra dependency (Lodash), may be slower than native solutions for very large datasets.
2. Native `structuredClone`:
	* Pros: built-in, efficient, and specifically designed for creating deep copies of complex data structures.
	* Cons: requires Chrome 127 or later to work, limited support on other browsers.
3. `JSON.parse(JSON.stringify())`:
	* Pros: lightweight, widely supported, and easy to implement.
	* Cons: only creates a shallow copy (top-level properties), can be slow for large datasets.

**Library and Purpose**

Lodash's `cloneDeep` is a popular JavaScript library that provides a way to create deep copies of objects. It recursively clones all nested properties and is widely used in the industry.

**Special JS Feature or Syntax**

The native `structuredClone` API uses a new syntax called "structured clone" which was introduced in ECMAScript 2022. This feature allows creating deep copies of complex data structures, including objects and arrays, while preserving their original structure and relationships. The `structuredClone` function is only available in Chrome 127 and later versions.

**Other Alternatives**

If you don't have access to Lodash or the native `structuredClone` API, other alternatives for creating deep copies of objects include:

* Using a library like Immutable.js or DeepCopy
* Implementing your own recursive copying algorithm using JavaScript's built-in methods (e.g., `JSON.parse(JSON.stringify())`, but be aware that this method only creates a shallow copy).
* Using a third-party library like jQuery's $.extend(true, source, target) for creating deep copies of objects.

Lodash cloneDeep vs structuredClone vs JSON Parse (100 000 objects) (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: Registered User

Go to the latest result

Lodash cloneDeep

Native structuredClone

JSON Parse

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Lodash cloneDeep vs structuredClone vs JSON Parse (100 000 objects) (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: Registered User

Go to the latest result

Lodash cloneDeep

Native structuredClone

JSON Parse

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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: `Lodash cloneDeep vs Native structuredClone vs JSON Parse`