Benchmark: structuredClone test

structuredClone test (version: 0)

compare array copy/clone methods sdfewfe

Comparing performance of: Lodash cloneDeep vs Native map deep slice(turns objects into arrays) vs Native JSON parse vs Native map deep slice at 0(turns objects into arrays) vs Native map(shallow clone) vs Recursive deep clone vs Map deep clone vs Object.assign shallow clone vs structuredClone

Created: 3 years ago by: Guest

Jump to the latest result

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 map deep slice(turns objects into arrays)
testCopy = testArray.map(arr => testArray.slice());
Native JSON parse
testCopy = JSON.parse(JSON.stringify(testArray));
Native map deep slice at 0(turns objects into arrays)
testCopy = testArray.map(arr => testArray.slice(0));
Native map(shallow clone)
testCopy = testArray.map(arr => arr);
Recursive deep clone
testCopy = deepClone(testArray);
Map deep clone
testCopy = testArray.map(arr => deepClone(arr));
Object.assign shallow clone
testCopy = Object.assign([...testArray]);
structuredClone
testCopy = structuredClone(testArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native map deep slice(turns objects into arrays)
Native JSON parse
Native map deep slice at 0(turns objects into arrays)
Native map(shallow clone)
Recursive deep clone
Map deep clone
Object.assign shallow clone
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	480872.0 Ops/sec
Native map deep slice(turns objects into arrays)	10620675.0 Ops/sec
Native JSON parse	811074.6 Ops/sec
Native map deep slice at 0(turns objects into arrays)	10562439.0 Ops/sec
Native map(shallow clone)	11749485.0 Ops/sec
Recursive deep clone	2366703.8 Ops/sec
Map deep clone	2537148.0 Ops/sec
Object.assign shallow clone	11198713.0 Ops/sec
structuredClone	359605.8 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 benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark tests the performance of different methods for copying or cloning arrays in JavaScript. The test cases compare various approaches, including native methods, libraries like Lodash, and a proposed structure clone method.

**Tested Methods and Libraries**

Here's a summary of the tested methods:

1. **Native map deep slice**: Uses `map()` with `slice()` to create a shallow copy of an array.
2. **Native map deep slice at 0**: Similar to the previous method, but uses `slice(0)` instead of `slice()`.
3. **Object.assign shallow clone**: Uses `Object.assign()` to create a shallow copy of an array.
4. **Lodash cloneDeep**: Uses Lodash's `cloneDeep()` function to create a deep copy of an array.
5. **Native JSON parse**: Not actually parsing JSON, but rather using the `JSON.parse()` method (which does nothing) as a comparison point for performance.
6. **Proposed structure clone**: A new method proposed for cloning arrays, implemented in JavaScript.

**Comparison and Pros/Cons**

Here's a brief summary of each method:

1. **Native map deep slice**: Fast, but creates a shallow copy.
2. **Native map deep slice at 0**: Similar to the previous method, but with an additional overhead due to slicing from index 0.
3. **Object.assign shallow clone**: Creates a shallow copy and can be slower due to the overhead of function calls.
4. **Lodash cloneDeep**: A reliable way to create deep copies, but may be slower than native methods due to the library's overhead.
5. **Native JSON parse**: Not actually parsing JSON, so it's not relevant to array cloning. However, its performance is still included for comparison purposes.
6. **Proposed structure clone**: The proposed method uses a custom implementation that aims to provide a balance between speed and correctness.

**Performance Comparison**

The benchmark results show the performance of each method across different browsers and devices. The top performer is the native `map deep slice` method, followed closely by the Lodash `cloneDeep()` function. The proposed structure clone method performs well as well, considering its custom implementation.

In general, the results suggest that:

* Native methods are often faster than library-based solutions.
* Deep copying (as opposed to shallow copying) can be slower due to additional overhead.
* Performance can vary significantly across different browsers and devices.

The benchmark provides a useful insight into the performance characteristics of various array cloning methods in JavaScript.

Related benchmarks: