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

​x
 
​
<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;
};

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 6 hours ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	358790.6 Ops/sec
Native map deep slice(turns objects into arrays)	8343281.5 Ops/sec
Native JSON parse	542964.2 Ops/sec
Native map deep slice at 0(turns objects into arrays)	8317737.5 Ops/sec
Native map(shallow clone)	9308361.0 Ops/sec
Recursive deep clone	2167404.0 Ops/sec
Map deep clone	2272635.2 Ops/sec
Object.assign shallow clone	8479168.0 Ops/sec
structuredClone	236132.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

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:

Native map deep slice: Uses map() with slice() to create a shallow copy of an array.
Native map deep slice at 0: Similar to the previous method, but uses slice(0) instead of slice().
Object.assign shallow clone: Uses Object.assign() to create a shallow copy of an array.
Lodash cloneDeep: Uses Lodash's cloneDeep() function to create a deep copy of an array.
Native JSON parse: Not actually parsing JSON, but rather using the JSON.parse() method (which does nothing) as a comparison point for performance.
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:

Native map deep slice: Fast, but creates a shallow copy.
Native map deep slice at 0: Similar to the previous method, but with an additional overhead due to slicing from index 0.
Object.assign shallow clone: Creates a shallow copy and can be slower due to the overhead of function calls.
Lodash cloneDeep: A reliable way to create deep copies, but may be slower than native methods due to the library's overhead.
Native JSON parse: Not actually parsing JSON, so it's not relevant to array cloning. However, its performance is still included for comparison purposes.
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.

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**

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