Run results for: structuredClone vs deepClone vs JSON clone and compare with custom function vs stringified

Run details:

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

Browser: Firefox 135

Operating system: Linux

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
structuredClone + valuesEqualsDeep	14729.8 Ops/sec
deepClone + valuesEqualsDeep	18909.4 Ops/sec
JSON + valuesEqualsDeep	13220.2 Ops/sec
structuredClone + stringify	16884.3 Ops/sec
deepClone + stringify	19622.6 Ops/sec
JSON + stringify	19160.8 Ops/sec

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

Run results for: structuredClone vs deepClone vs JSON clone and compare with custom function vs stringified

structuredClone + valuesEqualsDeep

deepClone + valuesEqualsDeep

JSON + valuesEqualsDeep

structuredClone + stringify

deepClone + stringify

JSON + stringify