Benchmark: Lodash cloneDeep vs structuredClone deep array

HTML Preparation code:

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

AخA
 
<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...',
    jayson: {
    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
    parse: 'JSON.parse() method parses a JSON string...',
      jayson: {
    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
    parse: 'JSON.parse() method parses a JSON string...',
        jayson: {
    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
    parse: 'JSON.parse() method parses a JSON string...'
  }
  }
  }
  }
};

var arr = []
for (let i = 0; i <=10000; i++) {
  arr.push(structuredClone(MyObject))
}
var myCopy = null;

​x
 
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...',    jayson: {    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',    parse: 'JSON.parse() method parses a JSON string...',      jayson: {    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',    parse: 'JSON.parse() method parses a JSON string...',        jayson: {    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',    parse: 'JSON.parse() method parses a JSON string...'  }  }  }  }};​var arr = []for (let i = 0; i <=10000; i++) {  arr.push(structuredClone(MyObject))}var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(arr);
myCopy = _.cloneDeep(arr);
Native structuredClone
myCopy = structuredClone(arr);
myCopy = structuredClone(arr);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Lodash cloneDeep
Native structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 days ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	23.6 Ops/sec
Native structuredClone	23.2 Ops/sec

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

Let's break down the benchmark and its options.

Benchmark Definition

The benchmark compares two approaches to create a deep copy of an array:

Lodash cloneDeep: The test uses the cloneDeep function from the Lodash library, which is a popular utility library for JavaScript.
Native structuredClone: The test uses the structuredClone API, which is a relatively new feature introduced in ECMAScript 2020.

Options Compared

The two options are compared in terms of their performance on creating a deep copy of an array with 10,000 elements.

Pros and Cons

Lodash cloneDeep:
- Pros:
  - Wide adoption and support across modern browsers.
  - Well-maintained and widely tested library.
  - Provides additional utility functions beyond just cloning arrays.
- Cons:
  - Adds an extra dependency to the benchmark (the Lodash library).
  - May introduce some overhead due to the library's complexity.
Native structuredClone:
- Pros:
  - Built into modern browsers, reducing dependencies and potential overhead.
  - Provides a more concise and efficient way to create deep copies.
- Cons:
  - Limited support across older browsers (prior to ECMAScript 2020).
  - May require special handling for non-array values.

Other Considerations

Library Purpose: The Lodash library is a general-purpose utility library, providing a wide range of functions beyond just cloning arrays.
JavaScript Feature: The structuredClone API uses the JSON protocol to create deep copies, which is a relatively new feature introduced in ECMAScript 2020.

Alternative Approaches

Other approaches to creating deep copies include:

Recursive Object Assign (ROA): A simple and efficient approach that iterates through the object's properties to create a deep copy.
Array.prototype.slice(): Creates a shallow copy of an array by iterating through its elements.
For...of loop with JSON.parse(JSON.stringify()): Another way to use JSON.parse() to create a deep copy, although this can be slower and more memory-intensive than structuredClone.

Keep in mind that the best approach depends on the specific requirements and constraints of your project.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Definition**

The benchmark compares two approaches to create a deep copy of an array:

1. **Lodash cloneDeep**: The test uses the `cloneDeep` function from the Lodash library, which is a popular utility library for JavaScript.
2. **Native structuredClone**: The test uses the `structuredClone` API, which is a relatively new feature introduced in ECMAScript 2020.

**Options Compared**

The two options are compared in terms of their performance on creating a deep copy of an array with 10,000 elements.

**Pros and Cons**

1. **Lodash cloneDeep**:
	* Pros:
		+ Wide adoption and support across modern browsers.
		+ Well-maintained and widely tested library.
		+ Provides additional utility functions beyond just cloning arrays.
	* Cons:
		+ Adds an extra dependency to the benchmark (the Lodash library).
		+ May introduce some overhead due to the library's complexity.
2. **Native structuredClone**:
	* Pros:
		+ Built into modern browsers, reducing dependencies and potential overhead.
		+ Provides a more concise and efficient way to create deep copies.
	* Cons:
		+ Limited support across older browsers (prior to ECMAScript 2020).
		+ May require special handling for non-array values.

**Other Considerations**

1. **Library Purpose**: The Lodash library is a general-purpose utility library, providing a wide range of functions beyond just cloning arrays.
2. **JavaScript Feature**: The `structuredClone` API uses the `JSON` protocol to create deep copies, which is a relatively new feature introduced in ECMAScript 2020.

**Alternative Approaches**

Other approaches to creating deep copies include:

1. **Recursive Object Assign (ROA)**: A simple and efficient approach that iterates through the object's properties to create a deep copy.
2. **Array.prototype.slice()**: Creates a shallow copy of an array by iterating through its elements.
3. **For...of loop with JSON.parse(JSON.stringify())**: Another way to use `JSON.parse()` to create a deep copy, although this can be slower and more memory-intensive than `structuredClone`.

Keep in mind that the best approach depends on the specific requirements and constraints of your project.

Related benchmarks:

Lodash cloneDeep vs structuredClone deep array (version: 0)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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