Benchmark: structuredClone perf

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clone/2.1.2/clone.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...'
  }
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Json clone
myCopy = JSON.parse(JSON.stringify(MyObject));
Ramda clone
myCopy = R.clone(MyObject);
hand rolled
const cp=(obj)=>"object" === typeof obj ? Object.fromEntries(Object.entries(obj).map(([k,v])=>[k,cp(v)])) : obj myCopy = cp(MyObject)
spread
myCopy = {...MyObject}
obj.assign
myCopy = Object.assign({}, MyObject)
structuredClone
myCopy = structuredClone(MyObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Json clone
Ramda clone
hand rolled
spread
obj.assign
structuredClone

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/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	712996.2 Ops/sec
Json clone	424169.4 Ops/sec
Ramda clone	1177628.5 Ops/sec
hand rolled	641300.4 Ops/sec
spread	7522794.5 Ops/sec
obj.assign	3339646.2 Ops/sec
structuredClone	286243.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 world of structured cloning and explore what's being tested in this benchmark.

**Structured Cloning**

Structured cloning is a relatively new JavaScript feature introduced in ECMAScript 2020, specifically for preserving object graphs while creating a shallow copy. It allows you to create a deep clone of an object by simply using the `structuredClone()` function with the `Object` object as its argument.

In this benchmark, we have six test cases:

1. **Structured Clone (`structuredClone(MyObject)`)**: This is the "reference" implementation, which uses the built-in `structuredClone()` function to create a deep clone of `MyObject`.
2. **Hand Rolled Clone**: This implementation does not use any libraries and instead manually recreates the object graph using the spread operator (`{...MyObject}`) or `Object.fromEntries()` with recursion.
3. **Lodash Clone Deep (`_.cloneDeep(MyObject)`)**: Lodash is a popular utility library that provides various functions for working with data structures, including deep cloning. This implementation uses `_cloneDeep` to create a deep clone of `MyObject`.
4. **Ramda Clone (`R.clone(MyObject)`)**: Ramda is another utility library that provides functional programming helpers, including a clone function. This implementation uses `R.clone` to create a deep clone of `MyObject`.
5. **Json Clone (`JSON.parse(JSON.stringify(MyObject))`)**: Although not the most efficient way to perform cloning, this implementation uses JSON serialization and deserialization to create a copy of `MyObject`. Be aware that this method can fail for certain data types.
6. **Spread Operator Clone (`myCopy = {...MyObject}`)**: This is another simple implementation using the spread operator to create a shallow copy of `MyObject`.

**Pros and Cons**

Here's a brief rundown of each approach:

* **Structured Clone**: Pros:
	+ Efficient and optimal for most use cases.
	+ Preserves object graph structure.
*   Cons:
	+ Only supported in ECMAScript 2020 and later.
*   Hand Rolled Clone: Pros:
	+ No external dependencies.
	+ Can be used with any JavaScript engine that supports the spread operator.
*   Con: Manual implementation can lead to more complex code and potential bugs.

*   Lodash Clone Deep: Pros:
	+ Well-tested and widely adopted library.
	+ Provides other utility functions in addition to deep cloning.
*   Cons:
	+ External dependency, which might impact performance.
*   Ramda Clone: Pros:
	+ Functional programming paradigm, making it concise and expressive.
	+ Also provides other functional helpers.
*   Cons:
	+ Another external dependency.

*   Json Clone: Pros:
	+ Simple to implement, regardless of engine or version.
*   Con:
	+ Inefficient and may fail for certain data types (e.g., circular references).
*   Spread Operator Clone: Pros:
	+ Simple and easy to understand.
	+ Supports shallow cloning with minimal effort.

**Comparison**

In general, the structured clone method is the recommended approach due to its efficiency and optimal performance. However, if you need to support older JavaScript engines or prefer a more manual approach, hand-rolled cloning using the spread operator might be a suitable alternative. For most use cases, though, relying on built-in functions like `structuredClone()` will provide better results.

Do you have any specific questions about this benchmark or structured cloning in general?

Related benchmarks:

structuredClone perf (version: 0)

just benchmarking things

Comparing performance of: Lodash cloneDeep vs Json clone vs Ramda clone vs hand rolled vs spread vs obj.assign vs structuredClone

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Json clone

Ramda clone

hand rolled

spread

obj.assign

structuredClone

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