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

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

Test name	Executions per second
Lodash cloneDeep	470666.2 Ops/sec
Native JSON parse	762994.9 Ops/sec
Recursive deep clone	2565434.2 Ops/sec
structuredClone	318038.8 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.

Related benchmarks:

structuredClone vs alternatives test (version: 0)

compare object deep clone methods

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

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native JSON parse

Recursive deep clone

structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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