Benchmark: JSON.stringify vs structuredClone vs cloneLineageData vs cloneDeep

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...'
  },
  mySet: new Set([1,2,3,1]),
  myList: [1,3,4,5,67,'ab'],
  myDate: new Date(),
};

var myCopy = null;

Tests:

JSON.stringify
myCopy = JSON.parse(JSON.stringify(MyObject));
structuredClone
myCopy = structuredClone(MyObject);
cloneLineageData
const cloneLineageData = (toClone) => { if (typeof toClone !== 'object' || toClone === null) return toClone; if (toClone instanceof Set) { return new Set(toClone); } if (Array.isArray(toClone)) { return toClone.map(cloneLineageData); } if (toClone instanceof Date) { return new Date(toClone); } const cloned = { ...toClone }; const clonedObjKeys = Object.keys(cloned); for (let i = 0; i < clonedObjKeys.length; i += 1) { const key = clonedObjKeys[i]; cloned[key] = cloneLineageData(cloned[key]); } return cloned; }; myCopy = cloneLineageData(MyObject);
lodash.cloneDeep
myCopy = _.cloneDeep(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.stringify
structuredClone
cloneLineageData
lodash.cloneDeep

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

I'm ready to dive into explaining the benchmark.

**What is being tested?**

The provided JSON represents a set of JavaScript microbenchmarks, specifically testing different methods for creating deep copies of objects and arrays. The benchmarks focus on the following approaches:

1. `JSON.stringify` vs `structuredClone`
2. `cloneLineageData` (a custom implementation)
3. `lodash.cloneDeep`

**Options compared**

Here's a brief overview of each approach and their pros and cons:

1. **`JSON.stringify`**: This method converts a JavaScript object to a JSON string, which can then be parsed back into an object using `JSON.parse`. The resulting object is a shallow copy, meaning it only copies the top-level properties.
	* Pros: Simple, widely supported.
	* Cons: Can lose type information and create issues with circular references.
2. **`structuredClone`**: This is a relatively new method introduced in JavaScript, available since ECMAScript 2020 (ES12). It creates a deep copy of an object or array, preserving the original's structure and content.
	* Pros: Preserves type information, handles circular references, and is designed for efficient cloning.
	* Cons: Requires modern browsers that support ES12.
3. **`cloneLineageData`**: This custom implementation recursively clones objects and arrays, handling nested properties and avoiding circular references.
	* Pros: Customizable, can handle complex data structures.
	* Cons: More verbose and error-prone than built-in methods.

**Other considerations**

When working with JavaScript object cloning, it's essential to consider:

* **Circular references**: When an object contains a reference to itself, the cloned copy will also contain this reference. To avoid infinite loops, you may need to implement a custom clone method that detects and handles circular references.
* **Type information**: Some methods (like `JSON.stringify`) can lose type information when creating a shallow copy, leading to issues with type checks and validation.

**Library used**

`lodash.cloneDeep` is a popular utility function from the Lodash library. It provides a simple way to create deep copies of objects and arrays, handling complex data structures and circular references.

**Special JS feature or syntax**

The benchmark uses `structuredClone`, which is a relatively new JavaScript feature introduced in ES12. This method requires modern browsers that support ES12 to function correctly.

**Benchmark preparation code**

The script preparation code defines a test object (`MyObject`) with various properties, including an array and a set. The custom implementation (`cloneLineageData`) recursively clones the entire object structure, while `JSON.stringify` creates a shallow copy of only the top-level properties.

I hope this explanation helps software engineers understand the benchmark!

Latest run results:

Run details: (Test run date: 3 months ago)

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
JSON.stringify	478523.2 Ops/sec
structuredClone	501116.2 Ops/sec
cloneLineageData	651536.2 Ops/sec
lodash.cloneDeep	495595.4 Ops/sec

Related benchmarks:

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

JSON.stringify vs structuredClone vs cloneLineageData vs cloneDeep

Comparing performance of: JSON.stringify vs structuredClone vs cloneLineageData vs lodash.cloneDeep

Created: 4 months ago by: Registered User

Jump to the latest result

JSON.stringify

structuredClone

cloneLineageData

lodash.cloneDeep

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):