Benchmark: structuredClone vs deepClone vs JSON clone and compare with custom function vs stringified

Script Preparation code:

const FALLBACK = Symbol('FALLBACK');
const DIFF_DEEP_VALUE = Symbol('DIFF_DEEP_VALUE');
const DIFF_VALUE = Symbol('DIFF_VALUE');
const DIFF_SAME = Symbol('DIFF_SAME');
function valuesEqualsDeep(val1, val2) {
    // truthiness differs
    if ((val1 && !val2) || (!val1 && val2)) {
        return {
            type: DIFF_VALUE,
            firstFalse: {
                key: undefined,
                targets: [val1, val2],
                values: [val1, val2],
            },
        };
    }
    const constructor1 = (val1 ?? FALLBACK).constructor;
    const constructor2 = (val2 ?? FALLBACK).constructor;
    // constructor differs
    if (constructor1 !== constructor2) {
        return {
            type: DIFF_DEEP_VALUE,
            firstFalse: {
                key: 'constructor',
                targets: [val1, val2],
                values: [constructor1, constructor2],
            },
        };
    }
    switch (constructor1) {
        case Array: {
            // some child differs
            const arr1 = val1;
            const arr2 = val2;
            const maxLength = Math.max(arr1.length, arr2.length);
            for (let i = 0; i < maxLength; i++) {
                const result = valuesEqualsDeep(arr1[i], arr2[i]);
                if (result.type === DIFF_DEEP_VALUE) {
                    return result;
                }
                if (result.type === DIFF_VALUE) {
                    return {
                        type: DIFF_DEEP_VALUE,
                        firstFalse: {
                            key: i,
                            targets: [arr1, arr2],
                            values: [arr1[i], arr2[i]],
                        },
                    };
                }
            }
            return { type: DIFF_SAME };
        }
        case Object: {
            const keys1 = Object.keys(val1);
            const keys2 = Object.keys(val2);
            // keys length differs
            if (keys1.length !== keys2.length) {
                return {
                    type: DIFF_DEEP_VALUE,
                    firstFalse: {
                        key: 'keys',
                        targets: [val1, val2],
                        values: [keys1, keys2],
                    },
                };
            }
            const obj1 = val1;
            const obj2 = val2;
            const keys = new Set([...keys1, ...keys2]);
            for (const key of keys) {
                // key existence differs
                if (!(key in obj1 && key in obj2)) {
                    return {
                        type: DIFF_DEEP_VALUE,
                        firstFalse: {
                            key,
                            targets: [obj1, obj2],
                            values: [obj1[key], obj2[key]],
                        },
                    };
                }
                // some deep value differs
                const result = valuesEqualsDeep(obj1[key], obj2[key]);
                if (result.type === DIFF_DEEP_VALUE) {
                    return result;
                }
                if (result.type === DIFF_VALUE) {
                    return {
                        type: DIFF_DEEP_VALUE,
                        firstFalse: {
                            key,
                            targets: [obj1, obj2],
                            values: [obj1[key], obj2[key]],
                        },
                    };
                }
            }
            return { type: DIFF_SAME };
        }
        default: {
            if (val1 !== val2) {
                return {
                    type: DIFF_VALUE,
                    firstFalse: {
                        key: undefined,
                        targets: [undefined, undefined],
                        values: [val1, val2],
                    },
                };
            }
        }
    }
    return { type: DIFF_SAME };
}

function deepClone(object) {
    if (typeof object !== 'object' || !object)
        return object;
    switch (object.constructor) {
        case Array:
            return object.map(deepClone);
        case Object: {
            const clone = {};
            const keys = Object.keys(object);
            for (let i = 0; i < keys.length; i++) {
                const key = keys[i];
                clone[key] = deepClone(object[key]);
            }
            return clone;
        }
        default:
            return object;
    }
}

const exampleObject = {
  props: {
    ':root': {
      id: '$R3',
      width: 374.5,
      height: 100,
      viewBox: '0 0 374.5 100',
      skew: 0,
      ratioToMillimeters: 0.1,
    },
    $outline: {
      id: '$outline',
      value: 20,
      broadcast: false,
    },
    $width: {
      id: '$width',
      value: 374.5,
      broadcast: true,
    },
    $height: {
      id: '$height',
      value: 100,
      broadcast: true,
    },
    $shapeMask: {
      hidden: false,
      id: '$shapeMask',
      x: 10,
      y: 50,
      r: 5,
      width: 80,
      height: 80,
      origin: [0, 0.5],
      shape: 'rect',
    },
    $background: {
      hidden: false,
      id: '$background',
      fill: 'black',
      outline: 20,
      rounded: true,
      points:
        '10,10 280.9179992675781,10 280.9179992675781,45.1870002746582 364.5,45.1870002746582 364.5,90 10,90',
    },
    $image: {
      hidden: false,
      id: '$image',
      mask: '$shapeMask',
      src: '/images/stepan.jpg',
      ratio: 1,
      height: 80,
      x: 50,
      y: 50,
      origin: [0.5, 0.5],
      flip: '',
      attach: [0.5, 0.5],
      fit: true,
      rotate: 0,
      scale: 1,
    },
    $text1: {
      hidden: false,
      id: '$text1',
      value: 'Skoda',
      size: 38,
      sizeFactor: 1,
      x: 100,
      y: 10,
      origin: [0, 0],
      length: 16,
      fill: '#ffffff',
      font: 'bauer',
    },
    $text2: {
      hidden: false,
      id: '$text2',
      value: 'Kodiak',
      size: 50,
      sizeFactor: 1,
      x: 100,
      y: 90,
      origin: [0, 1],
      length: 32,
      fill: '#ffffff',
      font: 'bauer',
    },
    $zr86xocz8if: {
      id: '$zr86xocz8if',
      label: 'Velikost samolepky',
    },
    $vmybmb201n: {
      id: '$vmybmb201n',
      label: 'Naklonění',
    },
    $iqxrp4hp34e: {
      id: '$iqxrp4hp34e',
      label: 'Nastaveni ikony',
    },
    $vxk8upsqmvf: {
      id: '$vxk8upsqmvf',
      target: '$image',
      label: 'Ikona',
      prop: 'src',
    },
    $dm6lx4tzycd: {
      id: '$dm6lx4tzycd',
      target: '$image',
      label: 'Rotace',
    },
    $30d447fwvzu: {
      id: '$30d447fwvzu',
      target: '$image',
      label: 'Zvětšení',
    },
    $0ni2n3xr7z: {
      id: '$0ni2n3xr7z',
      target: '$image',
      label: 'Zarovnání',
    },
    $8wg7uiyvbw7: {
      id: '$8wg7uiyvbw7',
      target: '$image',
      label: 'Oříznutí',
    },
    $3hv104efbdp: {
      id: '$3hv104efbdp',
      target: '$image',
      label: 'Otočení',
    },
    $h2k2l96a2x: {
      id: '$h2k2l96a2x',
      label: 'Nastaveni textu',
    },
    $d1bj9lmbsv8: {
      id: '$d1bj9lmbsv8',
      target: '$text1',
      label: 'Poměr textů',
      min: 0.5,
      max: 1.5,
      step: 0.1,
    },
    $guepgvgmxtg: {
      id: '$guepgvgmxtg',
      target: '$text1',
      label: 'Barva',
    },
    $oj3d5a71c2b: {
      id: '$oj3d5a71c2b',
      target: '$text1',
      label: 'Font',
      fonts: [
        'bauer',
        'ethnocentric',
        'skoda-pro',
        'skoda-pro-bold',
        'skoda-pro-extrabold',
      ],
    },
    $szes01kqa0h: {
      id: '$szes01kqa0h',
      target: '$text1',
      label: 'Text 1',
    },
    $cdr97wzatj8: {
      id: '$cdr97wzatj8',
      target: '$text2',
      label: 'Text 2',
    },
  },
  scope: {
    $width: 374.5,
    $height: 100,
    $outline: 20,
    $shapeMask: {
      l: 10,
      t: 10,
      r: 90,
      b: 90,
      w: 80,
      h: 80,
      props: {
        hidden: false,
        id: '$shapeMask',
        x: 10,
        y: 50,
        r: 5,
        width: 80,
        height: 80,
        origin: [0, 0.5],
        shape: 'rect',
      },
    },
    $background: {
      l: 10,
      t: 10,
      r: 364.5,
      b: 90,
      w: 354.5,
      h: 80,
      props: {
        hidden: false,
        id: '$background',
        fill: 'black',
        outline: 20,
        rounded: true,
        points:
          '10,10 280.9179992675781,10 280.9179992675781,45.1870002746582 364.5,45.1870002746582 364.5,90 10,90',
      },
    },
    $image: {
      l: 10,
      t: 10,
      r: 90,
      b: 90,
      w: 80,
      h: 80,
      props: {
        hidden: false,
        id: '$image',
        mask: '$shapeMask',
        src: '/images/stepan.jpg',
        ratio: 1,
        height: 80,
        x: 50,
        y: 50,
        origin: [0.5, 0.5],
        flip: '',
        attach: [0.5, 0.5],
        fit: true,
        rotate: 0,
        scale: 1,
      },
    },
    $text1: {
      l: 100,
      t: 10,
      r: 280.9179992675781,
      b: 40.32400131225586,
      w: 180.91799926757812,
      h: 30.32400131225586,
      props: {
        hidden: false,
        id: '$text1',
        value: 'Skoda',
        size: 38,
        sizeFactor: 1,
        x: 100,
        y: 10,
        origin: [0, 0],
        length: 16,
        fill: '#ffffff',
        font: 'bauer',
      },
    },
    $text2: {
      l: 100,
      t: 50.04999923706055,
      r: 364.5,
      b: 90,
      w: 264.5,
      h: 39.95000076293945,
      props: {
        hidden: false,
        id: '$text2',
        value: 'Kodiak',
        size: 50,
        sizeFactor: 1,
        x: 100,
        y: 90,
        origin: [0, 1],
        length: 32,
        fill: '#ffffff',
        font: 'bauer',
      },
    },
  },
};

Tests:

structuredClone + valuesEqualsDeep
const updatedObject = structuredClone(exampleObject); updatedObject.props.$cdr97wzatj8.label = `Text ${ Math.random() }`; const diff = valuesEqualsDeep(exampleObject, updatedObject);
deepClone + valuesEqualsDeep
const updatedObject = deepClone(exampleObject); updatedObject.props.$cdr97wzatj8.label = `Text ${ Math.random() }`; const diff = valuesEqualsDeep(exampleObject, updatedObject);
JSON + valuesEqualsDeep
const updatedObject = JSON.parse(JSON.stringify(exampleObject)); updatedObject.props.$cdr97wzatj8.label = `Text ${ Math.random() }`; const diff = valuesEqualsDeep(exampleObject, updatedObject);
structuredClone + stringify
const stringified = JSON.stringify(exampleObject); const updatedObject = structuredClone(exampleObject); updatedObject.props.$cdr97wzatj8.label = `Text ${ Math.random() }`; const diff = stringified === JSON.stringify(updatedObject);
deepClone + stringify
const stringified = JSON.stringify(exampleObject); const updatedObject = deepClone(exampleObject); updatedObject.props.$cdr97wzatj8.label = `Text ${ Math.random() }`; const diff = stringified === JSON.stringify(updatedObject);
JSON + stringify
const stringified = JSON.stringify(exampleObject); const updatedObject = JSON.parse(stringified); updatedObject.props.$cdr97wzatj8.label = `Text ${ Math.random() }`; const diff = stringified === JSON.stringify(updatedObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
structuredClone + valuesEqualsDeep
deepClone + valuesEqualsDeep
JSON + valuesEqualsDeep
structuredClone + stringify
deepClone + stringify
JSON + stringify

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Linux

View result in a separate tab

Test name	Executions per second
structuredClone + valuesEqualsDeep	7822.6 Ops/sec
deepClone + valuesEqualsDeep	8050.6 Ops/sec
JSON + valuesEqualsDeep	6431.3 Ops/sec
structuredClone + stringify	8168.1 Ops/sec
deepClone + stringify	10297.3 Ops/sec
JSON + stringify	11108.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark is designed to compare different methods of cloning JavaScript objects and assesses their effectiveness in terms of performance. The main approaches being compared are:

1. **`structuredClone`**
2. **Custom `deepClone` function**
3. **Serialization via `JSON.stringify` and `JSON.parse`**

Additionally, the benchmarks involve deep value checking using a custom function named `valuesEqualsDeep` which verifies the equality of the objects across their nested properties.

### Benchmark Options Compared

1. **structuredClone + valuesEqualsDeep**
   - **Pros**: 
     - `structuredClone` creates a deep copy of an object, preserving data types not handled by `JSON` (e.g., `Date`, `Map`, `Set`).
     - It is a built-in method and thus optimized.
   - **Cons**: 
     - Some edge cases, such as circular references, could cause issues in certain implementations (though it handles them internally).

2. **deepClone (Custom Implementation) + valuesEqualsDeep**
   - **Pros**: 
     - Customizable to specific needs or types of objects.
     - Easier to understand for educational purposes.
   - **Cons**:
     - Potentially less efficient than `structuredClone` as it involves manual recursion.
     - Requires careful handling of edge cases (like circular references and special object types).

3. **JSON + valuesEqualsDeep**
   - **Pros**: 
     - Easy to use and understand as the process is succinct via serialization.
     - Works great for simple objects without special data types.
   - **Cons**:
     - Fails for objects with non-serializable types, such as functions, `Date`, `Map`, or objects with circular references.
     - Performance can degrade with larger or complex objects due to string serialization/deserialization.

4. **structuredClone + stringify**
   - **Pros**: 
     - Combines the strengths of cloning with the clarity of a string representation.
   - **Cons**: 
     - Double processing (clone and stringify) might lead to performance issues if not necessary.

5. **deepClone + stringify**
   - **Pros**: 
     - Provides a way to verify deep equality via string comparison.
   - **Cons**: 
     - Similar serialization issues as above with JSON, with added overhead.

6. **JSON + stringify**
   - **Pros**: 
     - Simple and efficient for plain data objects.
   - **Cons**: 
     - Same limitations regarding object types as previously discussed.
     - Neglects any deep-equal verification due to reliance on string representations.

### Performance Results Analysis

The benchmark results indicate performance in terms of "executions per second". Here's a breakdown of findings based on execution speeds:

- **Best Performing**: 
  - `deepClone + valuesEqualsDeep` showed the highest performance, efficiently cloning and checking object structure in-depth.
  
- **Middle Performance**:
  - Both `deepClone + stringify` and `JSON + stringify` have shown decent performance while still providing some checks on equality through string representation.
  
- **Lower Performance**:
  - `structuredClone + valuesEqualsDeep` and `structuredClone + stringify` have relatively lower performance metrics compared to the custom deep clone, hinting at potential overhead due to creation and subsequent operations.

### Conclusion

Each cloning method has its suitable use cases:

- For **basic shallow objects** or where performance is a critical factor, `structuredClone` or `deepClone` could be preferable.
- When object properties need to preserve types like `Date`, maps, or sets, `structuredClone` is a better option.
- If performance on larger or more complex objects is not a primary concern and simplicity in coding is preferred, then JSON serialization can provide an easier path.

### Alternatives

Other alternatives for deep cloning in JavaScript may include:

- **Lodash's `cloneDeep`**: Robust handling of complex data structures, but introduces a dependency, and performance might vary based on object complexity.
- **Manual Recursive Functions**: Custom-designed based on specific needs. It allows for precise control over the copying process but entails maintenance overhead.

In conclusion, the choice of method heavily relies on the specific requirements of the application, including performance considerations and the types of objects being dealt with.

Related benchmarks:

structuredClone vs deepClone vs JSON clone and compare with custom function vs stringified (version: 1)

Comparing performance of: structuredClone + valuesEqualsDeep vs deepClone + valuesEqualsDeep vs JSON + valuesEqualsDeep vs structuredClone + stringify vs deepClone + stringify vs JSON + stringify

Created: 2 months ago by: Registered User

Jump to the latest result

structuredClone + valuesEqualsDeep

deepClone + valuesEqualsDeep

JSON + valuesEqualsDeep

structuredClone + stringify

deepClone + stringify

JSON + stringify

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):