Benchmark: deep cloning tests

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Script Preparation code:

var original = {
  timestamp: new Date(),
  results: new Map([["duration", 15000], ["started", 200], ["type", "hack"]]),
  well: {
    then: "idk",
    list: Array.from({length: 8}, () => Math.random())
  }
};
var results = [];

Tests:

_.cloneDeep(obj)
results[0] = _.cloneDeep(original);
JSON.parse(JSON.stringify(obj))
results[1] = JSON.parse(JSON.stringify(original));
structuredClone(obj)
results[2] = structuredClone(original);
_.cloneDeep(num)
results[3] = _.cloneDeep(8);
JSON.parse(JSON.stringify(num))
results[4] = JSON.parse(JSON.stringify(8));
structuredClone(num)
results[5] = structuredClone(8);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.cloneDeep(obj)
JSON.parse(JSON.stringify(obj))
structuredClone(obj)
_.cloneDeep(num)
JSON.parse(JSON.stringify(num))
structuredClone(num)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 121 on Android

View result in a separate tab

Test name	Executions per second
_.cloneDeep(obj)	36246.2 Ops/sec
JSON.parse(JSON.stringify(obj))	41950.3 Ops/sec
structuredClone(obj)	42641.9 Ops/sec
_.cloneDeep(num)	879510.9 Ops/sec
JSON.parse(JSON.stringify(num))	413144.2 Ops/sec
structuredClone(num)	141847.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on this provided JSON.

**Benchmark Definition**

The benchmark is designed to compare three different methods for deep cloning in JavaScript:

1. `_.cloneDeep` from Lodash
2. `JSON.parse(JSON.stringify)` (also known as the "old way" of deep cloning)
3. `structuredClone`

These methods are being compared on two types of objects: an object with nested properties (`original`) and a number (`num`).

**Options Being Compared**

Here's a brief overview of each option:

1. **_.cloneDeep**: This method is part of the Lodash library, which provides a convenient way to clone objects and arrays in JavaScript. It recursively creates new objects or arrays, preserving the original structure.
2. **JSON.parse(JSON.stringify)**: This method uses the `Stringify` function to serialize the object into a JSON string, and then parses that string back into an object using `JSON.parse`. This can lead to issues with cyclic references in the original object.
3. **structuredClone**: This method is a newer addition to JavaScript, introduced in ECMAScript 2020 (ES2020). It provides a safe way to clone objects, preserving their internal structure and avoiding issues with cyclic references.

**Pros and Cons of Each Approach**

Here's a brief summary:

1. **_.cloneDeep**:
	* Pros: Convenient, easy to use, and works well for most cases.
	* Cons: May not be the fastest option, especially for large objects or complex structures.
2. **JSON.parse(JSON.stringify)**:
	* Pros: Fast and efficient, but requires careful handling of cyclic references.
	* Cons: Can lead to issues with cyclic references, making it less reliable than other methods.
3. **structuredClone**:
	* Pros: Safe, efficient, and handles cyclic references correctly.
	* Cons: Only available in modern JavaScript environments (ES2020+).

**Library and Its Purpose**

The Lodash library is a popular utility library for JavaScript that provides a wide range of functions for tasks like array manipulation, object cloning, and more. `_.cloneDeep` is one of its many helpers.

**Special JS Feature or Syntax**

There's no special JavaScript feature or syntax being tested here, other than the use of the `structuredClone` method, which was introduced in a recent ECMAScript standard.

**Other Alternatives**

If you're interested in exploring alternative deep cloning methods, you might consider:

1. **`.slice()` and `.concat()`**: These methods can be used to create shallow copies of arrays or objects.
2. **`.Object.assign()`**: This method creates a new object by copying the values from an existing object.
3. **`const cloned = JSON.parse(JSON.stringify(obj));`: This approach uses `JSON.parse()` and `JSON.stringify()` together, which can lead to issues with cyclic references.

Keep in mind that each of these alternatives has its own pros and cons, and may not offer the same level of convenience or performance as the methods being compared in this benchmark.

Related benchmarks:

deep cloning tests (version: 0)

comparing deep cloning methods

Comparing performance of: _.cloneDeep(obj) vs JSON.parse(JSON.stringify(obj)) vs structuredClone(obj) vs _.cloneDeep(num) vs JSON.parse(JSON.stringify(num)) vs structuredClone(num)

Created: 10 months ago by: Guest

Jump to the latest result

_.cloneDeep(obj)

JSON.parse(JSON.stringify(obj))

structuredClone(obj)

_.cloneDeep(num)

JSON.parse(JSON.stringify(num))

structuredClone(num)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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