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 271 community runs

Desktop Results:

Chrome 223 runs

Lodash cloneDeep

230K/s

Native structuredClone

214K/s

JSON Parse

206K/s

Fastest: Lodash cloneDeep (1.1x faster)

View exact numbers

✓ Lodash cloneDeep: 229,824 ops/sec
• Native structuredClone: 214,473 ops/sec
• JSON Parse: 206,085 ops/sec

Firefox 42 runs

Native structuredClone

218K/s

JSON Parse

195K/s

Lodash cloneDeep

183K/s

Fastest: Native structuredClone (1.2x faster)

View exact numbers

✓ Native structuredClone: 217,844 ops/sec
• JSON Parse: 195,431 ops/sec
• Lodash cloneDeep: 182,799 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: 6 hours ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:153.0) Gecko/20100101 Firefox/153.0

Browser/OS: Firefox 153 on Windows

View result in a separate tab

Native structuredClone

256K/s

Lodash cloneDeep

214K/s

JSON Parse

211K/s

View exact numbers

Test name	Executions per second
✓ Native structuredClone	255,988 Ops/sec
Lodash cloneDeep	214,200 Ops/sec
JSON Parse	210,981 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)

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 271 community runs

Desktop Results:

Chrome 223 runs

Firefox 42 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)

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 271 community runs

Desktop Results:

Chrome 223 runs

Firefox 42 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`