Benchmark: structuredClone vs alternatives test

HTML Preparation code:

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

Script Preparation code:

var testArray = [{
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
},{
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
}];

var testCopy = null;

var deepClone = function(obj) {
   var out;
    if (Array.isArray(obj)) {
        out = [];
        for (var index = 0; index < obj.length; ++index) {
            let subArray = obj[index];
            out.push((subArray === null) ? subArray : (subArray instanceof Date) ? new Date(subArray.valueOf()) : (typeof subArray === 'object') ? deepClone(subArray) : subArray);
        }
    } else {
        out = {};
        for (var key in obj) {
            var subObject = obj[key];
            out[key] = subObject === null ? subObject : subObject instanceof Date ? new Date(subObject.valueOf()) : (typeof subObject === 'object') ? deepClone(subObject) : subObject;
            
           
        }
    }
    return out;
};

Tests:

Lodash cloneDeep
testCopy = _.cloneDeep(testArray);
Native JSON parse
testCopy = JSON.parse(JSON.stringify(testArray));
Recursive deep clone
testCopy = deepClone(testArray);
structuredClone
testCopy = structuredClone(testArray);

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Recursive deep clone

2.3M/s

Native JSON parse

758K/s

Lodash cloneDeep

473K/s

structuredClone

356K/s

Fastest: Recursive deep clone (6.5x faster)

View exact numbers

✓ Recursive deep clone: 2,314,974 ops/sec
• Native JSON parse: 758,037 ops/sec
• Lodash cloneDeep: 473,218 ops/sec
• structuredClone: 355,838 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native JSON parse
Recursive deep clone
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/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Recursive deep clone

2.6M/s

Native JSON parse

763K/s

Lodash cloneDeep

471K/s

structuredClone

318K/s

View exact numbers

Test name	Executions per second
✓ Recursive deep clone	2,565,434 Ops/sec
Native JSON parse	762,995 Ops/sec
Lodash cloneDeep	470,666 Ops/sec
structuredClone	318,039 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this specific benchmark.

**Benchmark Definition**

The benchmark is designed to compare four different methods for creating a deep clone of an object:

1. `structuredClone`
2. Lodash's `cloneDeep` function
3. Native JSON parsing using `JSON.parse(JSON.stringify())`
4. Recursive deep cloning implemented by the developer (`deepClone` function)

**Options Compared**

Each test case uses one of these four methods to create a copy of the input object `testArray`. The main difference between them lies in how they handle nested objects, arrays, and other complex data structures.

* `structuredClone`: A new method introduced in ECMAScript 2022 (ES12), which creates a deep clone of an object while preserving its structure and references.
* Lodash's `cloneDeep`: A popular utility function that recursively clones objects, including arrays and nested objects.
* Native JSON parsing: The built-in `JSON.parse()` function can be used to create a copy of an object by stringifying it with `JSON.stringify()`.
* Recursive deep cloning (`deepClone`): A custom implementation that uses recursion to clone each property and value in the object.

**Pros and Cons**

Here's a brief summary of each approach:

* **structuredClone**: Pros: Efficient, accurate, and well-defined. Cons: Limited support in older browsers (before ES12).
* Lodash's `cloneDeep`: Pros: Widely supported, efficient, and easy to use. Cons: Not part of the standard library, may have edge cases.
* Native JSON parsing: Pros: Simple, widely supported. Cons: May not handle nested objects or arrays correctly, can be slow for large datasets.
* Recursive deep cloning (`deepClone`): Pros: Customizable, can handle complex data structures. Cons: Error-prone, slower than other methods.

**Library and Purpose**

The Lodash library is a popular utility suite that provides various functions for functional programming in JavaScript. `cloneDeep` is one of these functions, designed to create a deep clone of an object or array.

In the context of this benchmark, using Lodash's `cloneDeep` allows developers to compare its performance with other methods, such as `structuredClone`, which is specifically designed for efficient cloning.

**Special JS Features**

None mentioned in the provided code snippet.

**Alternatives**

If you're looking for alternative methods or libraries for deep cloning in JavaScript, consider:

* Ramda's `cloneDeep` (similar to Lodash)
* Immer's `cloneDeep` (a library specifically designed for immutable data structures)
* Underscore.js's `deepClone` (another utility function from the same author as Lodash)

Keep in mind that each of these alternatives may have their own strengths and weaknesses, depending on your specific use case and requirements.

structuredClone vs alternatives test (version: 0) Benchmark.js

compare object deep clone methods

Comparing performance of: `Lodash cloneDeep vs Native JSON parse vs Recursive deep clone vs structuredClone`

Created: 2 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Native JSON parse

Recursive deep clone

structuredClone

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

structuredClone vs alternatives test (version: 0) Benchmark.js

compare object deep clone methods

Comparing performance of: Lodash cloneDeep vs Native JSON parse vs Recursive deep clone vs structuredClone

Created: 2 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Native JSON parse

Recursive deep clone

structuredClone

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

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 JSON parse vs Recursive deep clone vs structuredClone`