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);

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: one year 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

Test name	Executions per second
JSON.stringify	555021.9 Ops/sec
structuredClone	285111.2 Ops/sec
_.cloneDeep	861007.4 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`.

Related benchmarks:

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

Jump to the latest result

JSON.stringify

structuredClone

_.cloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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