Benchmark: Lodash cloneDeep vs structuredClone vs JSON Parse (deep object)

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...'
  },
  deeper: {
    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...'
    },
    deeper: {
      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...'
      },
      wayWayDown: {
        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...'
        },
        date: new Date(),
        set: new Set([1,2,3,4,5]),
        map: new Map([['a','b'],['c','d']])
      }
    }
  }
};

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 278 community runs

Desktop Results:

Chrome 229 runs

Lodash cloneDeep

229K/s

Native structuredClone

212K/s

JSON Parse

205K/s

Fastest: Lodash cloneDeep (1.1x faster)

View exact numbers

✓ Lodash cloneDeep: 228,923 ops/sec
• Native structuredClone: 211,935 ops/sec
• JSON Parse: 204,668 ops/sec

Firefox 43 runs

Native structuredClone

220K/s

JSON Parse

196K/s

Lodash cloneDeep

184K/s

Fastest: Native structuredClone (1.2x faster)

View exact numbers

✓ Native structuredClone: 219,996 ops/sec
• JSON Parse: 195,924 ops/sec
• Lodash cloneDeep: 184,024 ops/sec

Mobile Results:

Chrome 6 runs

Lodash cloneDeep

159K/s

JSON Parse

153K/s

Native structuredClone

109K/s

Fastest: Lodash cloneDeep (1.5x faster)

View exact numbers

✓ Lodash cloneDeep: 158,833 ops/sec
• JSON Parse: 153,115 ops/sec
• Native structuredClone: 108,694 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: 3 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Safari/537.36 Edg/153.0.0.0

Browser/OS: Chrome 153 on Windows

View result in a separate tab

JSON Parse

102K/s

Lodash cloneDeep

95K/s

Native structuredClone

86K/s

View exact numbers

Test name	Executions per second
✓ JSON Parse	102,127 Ops/sec
Lodash cloneDeep	94,877 Ops/sec
Native structuredClone	85,818 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different cloning methods in JavaScript can be a valuable exercise, especially when comparing the efficiency of libraries like Lodash with native implementations.

**Benchmark Definition**

The benchmark defines three test cases:

1. **Lodash cloneDeep**: This method uses the `_.cloneDeep()` function from the Lodash library to create a deep copy of the input object.
2. **Native structuredClone**: This method uses the `structuredClone()` function, which is a native JavaScript API introduced in ECMAScript 2020.
3. **JSON Parse**: This method uses the `JSON.parse(JSON.stringify())` trick to create a deep copy of the input object.

**Options Compared**

The three methods are compared based on their execution time, measured in executions per second (EPS). The benchmarked values indicate that:

* **JSON Parse** has the highest execution rate, followed by **Lodash cloneDeep**, and then **Native structuredClone**.
* **Native structuredClone** is generally faster than both Lodash methods.

**Pros and Cons**

Here's a summary of the pros and cons for each method:

1. **Lodash cloneDeep**:
	* Pros: Widely supported, easy to use, and well-maintained.
	* Cons: Adds an external dependency (Lodash), which might increase bundle size and complexity.
2. **Native structuredClone**:
	* Pros: Native implementation, no additional dependencies required, and potentially more efficient than Lodash methods.
	* Cons: Requires modern browsers or environments supporting ECMAScript 2020.
3. **JSON Parse**:
	* Pros: Lightweight, easy to understand, and widely supported (no external dependencies).
	* Cons: Not as efficient as native implementations or Lodash methods, can lead to performance issues with large inputs.

**Library**

The `structuredClone()` function is a part of the JavaScript standard library, introduced in ECMAScript 2020. Its purpose is to create a deep copy of an object, similar to the other two methods.

**Special JS Features/Syntax**

No special JavaScript features or syntax are used in this benchmark, apart from the use of `structuredClone()`, which is a relatively new feature introduced by the W3C.

**Other Alternatives**

If you need to clone objects in JavaScript and want alternatives to these methods:

1. **Array.prototype.slice().concat()**: Not recommended for deep cloning; suitable only for shallow cloning.
2. **Object.assign() + Array.prototype.slice()**: Can be used for deep cloning, but it's not as efficient or readable as the other methods.

In summary, when working with JavaScript object cloning, you should consider the trade-offs between efficiency, simplicity, and dependency management. Native implementations like `structuredClone()` might be the best choice in modern environments, while Lodash methods provide a familiar interface for those already invested in the library.

Lodash cloneDeep vs structuredClone vs JSON Parse (deep object) (version: 0) Benchmark.js

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

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

Created: 3 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Native structuredClone

JSON Parse

Historical Performance Data aggregated from 278 community runs

Desktop Results:

Chrome 229 runs

Firefox 43 runs

Mobile Results:

Chrome 6 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 (deep object) (version: 0) Benchmark.js

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

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

Created: 3 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Native structuredClone

JSON Parse

Historical Performance Data aggregated from 278 community runs

Desktop Results:

Chrome 229 runs

Firefox 43 runs

Mobile Results:

Chrome 6 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`