Benchmark: clone perf tests2

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:


const TARGET = Symbol('TARGET');
/**
 * @param {string} key
 * @param {string} operation
 * @returns {string}
 */
function getErrorMsg(key, operation) {
    return `Attempt to ${operation} key "${key}" on immutable object. Clone using deepClone() and then modify.`;
}
/**
 * @param {*} obj
 * @returns {boolean}
 */
const isObject = (obj) => typeof obj === 'object' && obj !== null;
class DefaultProxyHandler {
    /**
     * @param {*} target
     * @param {*} key
     * @returns {*}
     */
    get(target, key /*, receiver*/) {
        if (key === TARGET) {
            return target;
        }
        const obj = target[key];
        if (isObject(obj)) {
            return new Proxy(obj, this);
        }
        return obj;
    }
    /**
     * @param {*} target
     * @param {string} key
     */
    set(target, key) {
        throw new Error(getErrorMsg(key, 'set'));
    }
    /**
     * @param {*} target
     * @param {string} key
     * @returns {boolean}
     */
    deleteProperty(target, key) {
        if (key in target) {
            throw new Error(getErrorMsg(key, 'delete'));
        }
        return false;
    }
    /**
     * @param {*} target
     * @param {*} key
     */
    defineProperty(target, key) {
        throw new Error(getErrorMsg(key, 'define'));
    }
}
const proxyHandler = new DefaultProxyHandler();
class ProxyHandlerForMap extends DefaultProxyHandler {
    /**
     * @param {*} target
     * @param {*} key
     * @returns {*}
     */
    get(target, key /*, receiver*/) {
        if (key === TARGET) {
            return target;
        }
        const obj = target.get(key);
        if (isObject(obj)) {
            return new Proxy(obj, proxyHandler);
        }
        return obj;
    }
    ownKeys(target) {
        return [...target.keys()];
    }
    has(target, name) {
        return target.has(name);
    }
    getPrototypeOf() {
        return Object.prototype;
    }
    getOwnPropertyDescriptor(target, p) {
        if (!target.has(p)) {
            return undefined;
        }
        const val = this.get(target, p);
        return {
            writable: false,
            configurable: true,
            enumerable: true,
            value: val
        };
    }
}
const proxyHandlerForMap = new ProxyHandlerForMap();
class ProxyHandlerForMapOfMaps extends ProxyHandlerForMap {
    /**
     * @param {*} target
     * @param {*} key
     * @returns {*}
     */
    get(target, key /*, receiver*/) {
        if (key === TARGET) {
            return target;
        }
        const obj = target.get(key);
        if (isObject(obj)) {
            return new Proxy(obj, proxyHandlerForMap);
        }
        return obj;
    }
}
const proxyHandlerForMapOfMaps = new ProxyHandlerForMapOfMaps();
const lastProxy = {
    rawObject: undefined,
    proxy: undefined
};
const creator = (handler) => (obj) => {
    if (isObject(obj)) {
        // The same object is often requested more than once in succession from the Dal, so this
        // optimisation reduces the number of proxies that are created
        if (lastProxy.rawObject === obj) {
            return lastProxy.proxy;
        }
        // if not already a proxy
        if (obj && !obj[TARGET]) {
            lastProxy.rawObject = obj;
            lastProxy.proxy = new Proxy(obj, handler);
            return lastProxy.proxy;
        }
    }
    return obj;
};
/**
 * Returns a proxy that provides read only access to the underlying nested object
 * An attempt to modify the underlying object will result in an exception being thrown
 * @param {*} obj
 * @returns {*}
 */
const createImmutableProxy = creator(proxyHandler);
/**
 * Returns an immutable proxy for a map such that the entire data structure is viewed externally as a plain javascript object
 * An attempt to modify the underlying object will result in an exception being thrown
 * @param {*} obj
 * @returns {*}
 */
const createImmutableProxyForMap = creator(proxyHandlerForMap);
/**
 * Returns an immutable proxy for a map of maps such that the entire data structure is viewed externally as a plain javascript object
 * An attempt to modify the underlying object will result in an exception being thrown
 * @param {*} obj
 * @returns {*}
 */
const createImmutableProxyForMapOfMaps = creator(proxyHandlerForMapOfMaps);
function deepCloneDataArray(obj) {
    const copy = obj.slice(0);
    for (let i = 0; i < copy.length; ++i) {
        const val = obj[i];
        if (typeof val === 'object' && val !== null) {
            copy[i] = deepCloneDataObject(val);
        }
    }
    return copy;
}
function deepCloneDataObject(obj) {
    if (Array.isArray(obj)) {
        return deepCloneDataArray(obj);
    }
    if (obj instanceof Map) {
        const copy = {};
        for (const [key, value] of obj) {
            if (typeof value === 'object' && value !== null) {
                copy[key] = deepCloneDataObject(value);
            }
            else {
                copy[key] = value;
            }
        }
        return copy;
    }
    const copy = { ...obj };
    // eslint-disable-next-line guard-for-in
    for (const key in obj) {
        const val = obj[key];
        if (typeof val === 'object' && val !== null) {
            copy[key] = deepCloneDataObject(val);
        }
    }
    return copy;
}
/**
 * @param {*} obj
 * @returns {*}
 */
function deepClone(obj) {
    if (isObject(obj)) {
        // This is a performance optimization for proxies to prevent the entire nested object being proxied.
        // It's typically only needed for the root object of a proxy so we do it here
        // instead of in the recursive clone function for every nested object
        const proxyTarget = obj[TARGET];
        return deepCloneDataObject(proxyTarget || obj);
    }
    return obj;
}

/**
 * @param {*} a
 * @returns {*}
 */
const getRef = (a) => (isObject(a) ? a[TARGET] || a : a);
/**
 * @param {*} a
 * @param {*} b
 * @returns {boolean}
 */
function referenceCompare(a, b) {
    a = getRef(a);
    b = getRef(b);
    return a === b;
}

function isImmutableProxy(obj) {
    return isObject(obj) && !!obj[TARGET];
}




var objectToClone = {
      "type": "Component",
      "styleId": "txtNew",
      "id": "comp-kcspbj2c",
      "dataQuery": "#dataItem-kcspbj44",
      "skin": "wysiwyg.viewer.skins.WRichTextNewSkin",
      "layout": {
        "width": -310,
        "height": 65,
        "x": 507,
        "y": 48,
        "scale": 1.0,
        "rotationInDegrees": 0.0,
        "fixedPosition": false
      },
      "propertyQuery": "propItem-kcspbj5q",
      "mobileHintsQuery": "mobileHints-kcspihw9",
      "componentType": "wysiwyg.viewer.components.WRichText",
      "metaData": {
        "pageId": "c1dmp"
      }
    }

var proxyToClone = createImmutableProxy(objectToClone)

Tests:

_.cloneDeep(objectToClone)
_.cloneDeep(objectToClone)
structuredClone(objectToClone)
structuredClone(objectToClone)
deepClone(objectToClone)
deepClone(objectToClone)
_.cloneDeep(proxyToClone)
_.cloneDeep(proxyToClone)
structuredClone(proxyToClone)
structuredClone(proxyToClone)
deepClone(proxyToClone)
deepClone(proxyToClone)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.cloneDeep(objectToClone)
structuredClone(objectToClone)
deepClone(objectToClone)
_.cloneDeep(proxyToClone)
structuredClone(proxyToClone)
deepClone(proxyToClone)

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 113 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
_.cloneDeep(objectToClone)	821671.8 Ops/sec
structuredClone(objectToClone)	440976.0 Ops/sec
deepClone(objectToClone)	1424185.0 Ops/sec
_.cloneDeep(proxyToClone)	219704.1 Ops/sec
structuredClone(proxyToClone)	0.0 Ops/sec
deepClone(proxyToClone)	1384754.0 Ops/sec

clone perf tests2 (version: 1)

Comparing performance of: _.cloneDeep(objectToClone) vs structuredClone(objectToClone) vs deepClone(objectToClone) vs _.cloneDeep(proxyToClone) vs structuredClone(proxyToClone) vs deepClone(proxyToClone)

Created: 9 months ago by: Registered User

Jump to the latest result

_.cloneDeep(objectToClone)

structuredClone(objectToClone)

deepClone(objectToClone)

_.cloneDeep(proxyToClone)

structuredClone(proxyToClone)

deepClone(proxyToClone)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A