Benchmark: JSON.stringify + JSON.parse vs structuredClone vs fast_deep_clone (recursive)

Script Preparation code:

var obj = {
  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.parse(JSON.stringify())
JSON.parse(JSON.stringify(obj));
structuredClone()
structuredClone(obj);
fast_deep_clone()
const fast_deep_clone = (obj) => { function cloneArray(a, fn) { var keys = Object.keys(a); var a2 = new Array(keys.length) for (const key of keys) { var k = keys[key]; var cur = a[k]; if (typeof cur !== 'object' || cur === null) { a2[k] = cur; } else { a2[k] = fn(cur); } } return a2; } if (typeof obj !== 'object' || obj === null) return obj; if (obj instanceof Date) return new Date(obj); if (Array.isArray(obj)) return cloneArray(obj, fast_deep_clone); if (obj.toString() !== '[object Object]') { return obj.toString(); } let value, key; const keys = Object.keys(obj); const outObject = {}; for (key of keys) { if (key) { value = obj[key]; outObject[key] = fast_deep_clone(value); } } return outObject; }; fast_deep_clone(obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.parse(JSON.stringify())
structuredClone()
fast_deep_clone()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
JSON.parse(JSON.stringify())	719232.6 Ops/sec
structuredClone()	614901.4 Ops/sec
fast_deep_clone()	1704037.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the benchmark.

**Benchmark Overview**

The benchmark measures the performance of three different methods to create deep copies of objects: `JSON.parse(JSON.stringify(obj))`, `structuredClone(obj)`, and a custom implementation called `fast_deep_clone()`. The benchmark tests how many executions per second each method can handle on a desktop machine running Chrome 112.

**Method Comparison**

1. **`JSON.parse(JSON.stringify(obj))`**: This method uses the `Stringify()` and `Parse()` methods to convert an object to a JSON string and then parse it back into an object, respectively. While this method is simple, it's not designed for deep copying and can lead to issues with cyclic references (i.e., objects that reference themselves).
	* Pros: Simple to implement.
	* Cons: May not work correctly with complex objects or cyclic references.
2. **`structuredClone(obj)`**: This method is a newer API introduced in ECMAScript 2020, which provides a more efficient and safe way to create deep copies of objects. It's designed to handle cyclic references and other edge cases.
	* Pros: More efficient, safer, and handles cyclic references better than `JSON.parse(JSON.stringify(obj))`.
	* Cons: Newer API, may require additional setup or compatibility issues with older browsers or environments.
3. **`fast_deep_clone()`**: This is a custom implementation that recursively clones an object's properties, handling various data types (including arrays, objects, and dates). It's designed to be efficient and handle complex objects.
	* Pros: Customizable, can handle complex objects, and potentially more efficient than `structuredClone()`.
	* Cons: Requires additional code maintenance and debugging.

**Library/Feature Explanation**

The benchmark uses the following libraries or features:

1. **`structuredClone()`**: A newer ECMAScript API introduced in 2020, which provides a safe and efficient way to create deep copies of objects.
2. None (the `fast_deep_clone()` implementation is custom code).

**Special JS Features/Syntax**

There are no specific JavaScript features or syntax used in this benchmark that would require special explanation.

**Other Alternatives**

If you're looking for alternative methods to create deep copies of objects, you could consider:

1. **`JSON.stringify(obj)` and `eval(JSON.stringify(obj))`**: Similar to the first method, but with the added complexity of parsing a JSON string back into an object using `eval()`.
2. **`Lodash Deep Clone()`**: A popular library that provides a simple and efficient way to create deep copies of objects.
3. **`immer()`**: Another library that offers a more functional programming approach to creating immutable copies of objects.

Keep in mind that each method has its trade-offs, and the choice ultimately depends on your specific use case and requirements.

Related benchmarks:

JSON.stringify + JSON.parse vs structuredClone vs fast_deep_clone (recursive) (version: 5)

Comparing performance of: JSON.parse(JSON.stringify()) vs structuredClone() vs fast_deep_clone()

Created: one year ago by: Registered User

Jump to the latest result

JSON.parse(JSON.stringify())

structuredClone()

fast_deep_clone()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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