Benchmark: JSON.stringify vs structuredClone vs _.cloneDeep

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/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:

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

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

_.cloneDeep

1.1M/s

JSON.stringify

947K/s

structuredClone

376K/s

Fastest: _.cloneDeep (2.9x faster)

View exact numbers

✓ _.cloneDeep: 1,100,262 ops/sec
• JSON.stringify: 947,249 ops/sec
• structuredClone: 376,493 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
JSON.stringify
structuredClone
_.cloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Linux

View result in a separate tab

_.cloneDeep

861K/s

JSON.stringify

555K/s

structuredClone

285K/s

View exact numbers

Test name	Executions per second
✓ _.cloneDeep	861,007 Ops/sec
JSON.stringify	555,022 Ops/sec
structuredClone	285,111 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark that compares the performance of three different methods for creating deep copies of objects: `JSON.stringify`, `structuredClone`, and `_cloneDeep` from the Lodash library.

**Tested Options**

The benchmark tests the execution speed of each method in creating deep copies of an object (`MyObject`). The options being compared are:

1. **JSON.stringify**: This method converts a JavaScript value to a JSON string, which can be used to create a copy of the original object.
2. **structuredClone**: This method creates a shallow clone of an object, and then recursively clones its values to create a deep copy.
3. **_.cloneDeep** from Lodash: This function is designed specifically for creating deep copies of objects.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **JSON.stringify**:
	* Pros: Simple, widely supported, and fast.
	* Cons: May not work correctly with certain data types (e.g., dates), and can be slow for very large objects.
2. **structuredClone**:
	* Pros: Fast, modern, and supports most data types.
	* Cons: Not yet widely supported in older browsers or versions of JavaScript.
3. **_.cloneDeep** from Lodash:
	* Pros: Designed specifically for creating deep copies, handles complex data structures well.
	* Cons: Requires the Lodash library, which may not be included in all projects.

**Library and Its Purpose**

The `structuredClone` method is a modern JavaScript function introduced in ECMAScript 2020 (ES10). It's designed to create shallow clones of objects, with the intention of eventually supporting deep cloning. The `_cloneDeep` function from Lodash provides a more robust implementation for creating deep copies.

**Special JS Feature or Syntax**

None mentioned in this benchmark.

**Other Considerations**

When choosing between these methods, consider the following:

* If you need to support older browsers or versions of JavaScript, `JSON.stringify` might be a safer choice.
* For modern, fast execution and support for most data types, `structuredClone` is likely the best option.
* If you're already using Lodash in your project, `_cloneDeep` provides a convenient and efficient solution.

**Alternatives**

If you don't want to use Lodash or prefer not to rely on modern JavaScript features, you can consider alternative methods for creating deep copies:

1. **Array.prototype.slice()**: While not as robust as `structuredClone`, this method can be used to create shallow clones of arrays.
2. **For...in loops and Object.assign()**: This approach requires more manual effort but can be effective for small objects.
3. **Recursive functions**: You can write your own recursive function to clone an object, which can be a good learning exercise.

However, these alternatives may not be as efficient or reliable as `structuredClone` and `_cloneDeep`.

JSON.stringify vs structuredClone vs _.cloneDeep (version: 0)

JSON.stringify vs structuredClone vs _.cloneDeep

Comparing performance of: `JSON.stringify vs structuredClone vs _.cloneDeep`

Created: 2 years ago by: Guest

Go to the latest result

JSON.stringify

structuredClone

_.cloneDeep

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JSON.stringify vs structuredClone vs _.cloneDeep (version: 0)

JSON.stringify vs structuredClone vs _.cloneDeep

Comparing performance of: JSON.stringify vs structuredClone vs _.cloneDeep

Created: 2 years ago by: Guest

Go to the latest result

JSON.stringify

structuredClone

_.cloneDeep

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 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: `JSON.stringify vs structuredClone vs _.cloneDeep`