Benchmark: Lodash cloneDeep vs structuredClone vs JSON Parse (uint8array, 5MB)

HTML Preparation code:

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

Script Preparation code:

var size = 5000000;
var MyObject = new Uint8Array(size);

for (let i = 0; i < size; ++i) {
    MyObject[i] = Math.round(Math.random() * 255);
}

var myCopy = null;

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
JSON Parse

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	0.3 Ops/sec
Native structuredClone	205.7 Ops/sec
JSON Parse	0.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

MeasureThat.net is used to compare the performance of different methods for cloning and copying JavaScript objects, specifically JSON arrays (Uint8Arrays). The benchmark is designed to test the execution speed of three approaches:

1. **Lodash's `cloneDeep` method**
2. **Native `structuredClone` function** (introduced in modern browsers)
3. **JSON parsing with `JSON.stringify` and `JSON.parse`**

**Options Comparison**

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

1. **Lodash's `cloneDeep` method**
	* Pros: Robust, well-tested, and widely adopted.
	* Cons: Adds external dependency (Lodash), may introduce additional overhead due to function call.
2. **Native `structuredClone` function**
	* Pros: Fast, efficient, and designed for web use cases.
	* Cons: Introduced in modern browsers, might not be supported in older browsers or environments.
3. **JSON parsing with `JSON.stringify` and `JSON.parse`**
	* Pros: Simple, widely supported, and does not require external dependencies.
	* Cons: May incur additional overhead due to stringification and parse operations.

**Library Usage - Lodash**

Lodash is a popular JavaScript utility library that provides a wide range of functions for various tasks. In this benchmark, `cloneDeep` is used to create a deep copy of the input object (`MyObject`). The `cloneDeep` function recursively clones all properties and sub-properties of the original object.

**Special JS Feature - structuredClone**

The `structuredClone` function is a new feature introduced in modern browsers (Chrome 72+, Firefox 66+, Edge 83+) that allows creating exact copies of objects, including arrays and maps. It is designed to replace functions like `JSON.parse(JSON.stringify())` for efficient cloning.

**Benchmark Preparation Code**

The script preparation code creates an array (`MyObject`) with 5MB size, populates it with random values between 0 and 255, and then initializes a variable `myCopy` to be cloned using each of the three methods.

**Test Cases**

Each test case uses one of the cloning methods:

1. **Lodash's `cloneDeep` method**
2. **Native `structuredClone` function**
3. **JSON parsing with `JSON.stringify` and `JSON.parse`**

**Benchmark Results**

The benchmark results show the execution speed (executions per second) for each test case on a Chrome 108 desktop environment. The native `structuredClone` function appears to be the fastest, followed by JSON parsing, and then Lodash's `cloneDeep` method.

**Alternatives**

Other alternatives for cloning JavaScript objects include:

1. **Array.prototype.slice()**: Creates a shallow copy of an array.
2. **Object.assign()**: Creates a new object with copies of all properties from the source object.
3. **JSON.parse(JSON.stringify(object))`: A simple, widely supported method that creates a deep copy of an object.

However, these alternatives may incur additional overhead or have limitations (e.g., not supporting maps).

Keep in mind that this benchmark is specific to cloning JSON arrays and might not be representative for other use cases or objects. Always consider the specific requirements and constraints of your application when choosing a cloning method.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs JSON Parse (uint8array, 5MB) (version: 0)

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs JSON Parse

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON Parse

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