Benchmark: cloneDeep vs structuredClone

HTML Preparation code:

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

Script Preparation code:

var tree = [
  {
    id: '1',
    value: 'node 1',
    children: [
      {
        id: '2',
        value: 'node 2',
        children: [
          {
            id: '3',
            value: 'node 3',
            children: [],
          },
          {
            id: '4',
            value: 'node 4',
            children: [
              {
                id: '5',
                value: 'node 5',
                children: [],
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: '6',
    value: 'node 6',
    children: [
      {
        id: '7',
        value: 'node 7-1',
        children: [],
      },
    ],
  },
  {
    id: '8',
    value: 'node 8',
    children: [
      {
        id: '7',
        value: 'node 7-2',
        children: [],
      },
    ],
  },
];

var myCopy = null;

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Yandex Browser 25 on Windows

View result in a separate tab

Lodash cloneDeep

133K/s

Native structuredClone

118K/s

View exact numbers

Test name	Executions per second
✓ Lodash cloneDeep	132,994 Ops/sec
Native structuredClone	117,594 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and explain what's being tested.

**Benchmark Description**
The benchmark is comparing two approaches to create a deep copy of an object: `cloneDeep` from the Lodash library and the native `structuredClone` function.

**Options Compared**

* **Lodash `cloneDeep`**: This method uses the Lodash library to create a deep copy of the input object. It recursively clones all properties, including nested objects and arrays.
* **Native `structuredClone`**: This is a new JavaScript function introduced in ECMAScript 2020 (ES2020) as part of the Web Assembly standard. It creates a shallow clone of an object, but it also preserves some properties that are not typically cloned, such as symbolic values.

**Pros and Cons**

* **Lodash `cloneDeep`**:
	+ Pros: Provides a deep copy of the entire object graph, including nested objects and arrays.
	+ Cons: Uses the Lodash library, which may introduce additional overhead due to its size and complexity.
* **Native `structuredClone`**:
	+ Pros: Creates a shallow clone with some properties preserved, potentially reducing overhead compared to a full deep copy.
	+ Cons: Does not create a true deep copy of all nested objects and arrays; instead, it preserves certain properties (symbolic values) by reference.

**Library Used**
The `structuredClone` function is part of the ECMAScript standard. However, this benchmark is using the polyfill for older browsers that don't support the native function yet.

**Special JS Feature or Syntax**
Yes, the `structuredClone` function is a new JavaScript feature introduced in ES2020. It was designed to create a shallow clone while preserving some properties by reference, which can be useful in certain scenarios. This benchmark tests how well both approaches perform on this specific feature.

**Other Alternatives**

If you need to create a deep copy of an object without using the Lodash library or native `structuredClone` function:

* **JSON.parse(JSON.stringify(object))**: Creates a shallow copy, which may not be sufficient for all use cases.
* **Object.assign() with a custom comparator**: Can be used to create a deep copy by recursively cloning objects and arrays.

Keep in mind that the choice of implementation depends on your specific requirements and performance constraints.

cloneDeep vs structuredClone (version: 0)

Comparing performance of: `Lodash cloneDeep vs Native structuredClone`

Created: 3 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Native structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

cloneDeep vs structuredClone (version: 0)

Comparing performance of: Lodash cloneDeep vs Native structuredClone

Created: 3 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Native structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Lodash cloneDeep vs Native structuredClone`