Benchmark: structuredClone test

structuredClone test (version: 0) Benchmark.js

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: 4 years ago by: Guest

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

Historical Performance Data aggregated from 820 community runs

Desktop Results:

Chrome 588 runs

Native map(shallow clone)

9.0M/s

Object.assign shallow clone

6.4M/s

Native map deep slice at 0(turns objects into arrays)

5.9M/s

Native map deep slice(turns objects into arrays)

5.9M/s

Native JSON parse

558K/s

Map deep clone

493K/s

Recursive deep clone

450K/s

Lodash cloneDeep

393K/s

structuredClone

260K/s

Fastest: Native map(shallow clone) (34.5x faster)

View exact numbers

✓ Native map(shallow clone): 8,984,079 ops/sec
• Object.assign shallow clone: 6,355,981 ops/sec
• Native map deep slice at 0(turns objects into arrays): 5,892,471 ops/sec
• Native map deep slice(turns objects into arrays): 5,881,790 ops/sec
• Native JSON parse: 557,811 ops/sec
• Map deep clone: 493,339 ops/sec
• Recursive deep clone: 449,985 ops/sec
• Lodash cloneDeep: 392,606 ops/sec
• structuredClone: 260,177 ops/sec

Firefox 148 runs

Object.assign shallow clone

34.3M/s

Native map(shallow clone)

33.8M/s

Native map deep slice(turns objects into arrays)

15.5M/s

Native map deep slice at 0(turns objects into arrays)

13.7M/s

Recursive deep clone

2.0M/s

Map deep clone

1.4M/s

Native JSON parse

489K/s

structuredClone

335K/s

Lodash cloneDeep

260K/s

Fastest: Object.assign shallow clone (132.3x faster)

View exact numbers

✓ Object.assign shallow clone: 34,325,120 ops/sec
• Native map(shallow clone): 33,802,500 ops/sec
• Native map deep slice(turns objects into arrays): 15,454,612 ops/sec
• Native map deep slice at 0(turns objects into arrays): 13,747,460 ops/sec
• Recursive deep clone: 2,003,818 ops/sec
• Map deep clone: 1,388,651 ops/sec
• Native JSON parse: 488,781 ops/sec
• structuredClone: 334,602 ops/sec
• Lodash cloneDeep: 259,520 ops/sec

Safari 21 runs

Native map(shallow clone)

13.4M/s

Object.assign shallow clone

8.1M/s

Native map deep slice at 0(turns objects into arrays)

7.5M/s

Native map deep slice(turns objects into arrays)

7.3M/s

Native JSON parse

922K/s

Map deep clone

610K/s

Recursive deep clone

557K/s

Lodash cloneDeep

513K/s

structuredClone

346K/s

Fastest: Native map(shallow clone) (38.8x faster)

View exact numbers

✓ Native map(shallow clone): 13,404,033 ops/sec
• Object.assign shallow clone: 8,076,400 ops/sec
• Native map deep slice at 0(turns objects into arrays): 7,471,480 ops/sec
• Native map deep slice(turns objects into arrays): 7,339,040 ops/sec
• Native JSON parse: 922,053 ops/sec
• Map deep clone: 610,284 ops/sec
• Recursive deep clone: 556,558 ops/sec
• Lodash cloneDeep: 512,598 ops/sec
• structuredClone: 345,547 ops/sec

Mobile Results:

Chrome 37 runs

Native map(shallow clone)

5.0M/s

Object.assign shallow clone

3.9M/s

Native map deep slice(turns objects into arrays)

3.8M/s

Native map deep slice at 0(turns objects into arrays)

3.5M/s

Map deep clone

660K/s

Recursive deep clone

644K/s

Native JSON parse

355K/s

Lodash cloneDeep

239K/s

structuredClone

115K/s

Fastest: Native map(shallow clone) (43.1x faster)

View exact numbers

✓ Native map(shallow clone): 4,952,807 ops/sec
• Object.assign shallow clone: 3,882,163 ops/sec
• Native map deep slice(turns objects into arrays): 3,842,336 ops/sec
• Native map deep slice at 0(turns objects into arrays): 3,478,945 ops/sec
• Map deep clone: 660,044 ops/sec
• Recursive deep clone: 643,844 ops/sec
• Native JSON parse: 354,894 ops/sec
• Lodash cloneDeep: 239,412 ops/sec
• structuredClone: 114,997 ops/sec

Safari 26 runs

Native map(shallow clone)

14.2M/s

Native map deep slice(turns objects into arrays)

8.4M/s

Object.assign shallow clone

8.2M/s

Native map deep slice at 0(turns objects into arrays)

7.9M/s

Map deep clone

1.5M/s

Recursive deep clone

1.4M/s

Native JSON parse

905K/s

Lodash cloneDeep

543K/s

structuredClone

286K/s

Fastest: Native map(shallow clone) (49.9x faster)

View exact numbers

✓ Native map(shallow clone): 14,248,155 ops/sec
• Native map deep slice(turns objects into arrays): 8,426,554 ops/sec
• Object.assign shallow clone: 8,173,122 ops/sec
• Native map deep slice at 0(turns objects into arrays): 7,933,801 ops/sec
• Map deep clone: 1,457,212 ops/sec
• Recursive deep clone: 1,379,780 ops/sec
• Native JSON parse: 905,228 ops/sec
• Lodash cloneDeep: 543,159 ops/sec
• structuredClone: 285,532 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 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: 2 months ago)

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

Browser/OS: Chrome 149 on Mac OS X 10.15.7

View result in a separate tab

Native map(shallow clone)

17.7M/s

Object.assign shallow clone

16.9M/s

Native map deep slice(turns objects into arrays)

15.4M/s

Native map deep slice at 0(turns objects into arrays)

15.3M/s

Map deep clone

3.6M/s

Recursive deep clone

2.8M/s

Native JSON parse

1.2M/s

Lodash cloneDeep

680K/s

structuredClone

590K/s

View exact numbers

Test name	Executions per second
✓ Native map(shallow clone)	17,680,360 Ops/sec
Object.assign shallow clone	16,941,926 Ops/sec
Native map deep slice(turns objects into arrays)	15,384,221 Ops/sec
Native map deep slice at 0(turns objects into arrays)	15,263,743 Ops/sec
Map deep clone	3,573,902 Ops/sec
Recursive deep clone	2,777,993 Ops/sec
Native JSON parse	1,204,289 Ops/sec
Lodash cloneDeep	679,852 Ops/sec
structuredClone	589,545 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.

structuredClone test (version: 0) Benchmark.js

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: 4 years ago by: Guest

Go to the latest 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

Historical Performance Data aggregated from 820 community runs

Desktop Results:

Chrome 588 runs

Firefox 148 runs

Safari 21 runs

Mobile Results:

Chrome 37 runs

Safari 26 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 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`