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

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

deepClone(objectToClone)

9.1M/s

deepClone(proxyToClone)

7.8M/s

_.cloneDeep(objectToClone)

941K/s

structuredClone(objectToClone)

512K/s

_.cloneDeep(proxyToClone)

248K/s

structuredClone(proxyToClone)

0/s

View exact numbers

Test name	Executions per second
✓ deepClone(objectToClone)	9,059,971 Ops/sec
deepClone(proxyToClone)	7,752,926 Ops/sec
_.cloneDeep(objectToClone)	941,013 Ops/sec
structuredClone(objectToClone)	511,521 Ops/sec
_.cloneDeep(proxyToClone)	247,734 Ops/sec
structuredClone(proxyToClone)	0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

It seems like you're ready to dive into the benchmark results.

Based on the provided data, here are some observations and insights:

**Benchmark Performance**

* The `deepClone` function performs best with an average execution speed of around 821671.75 executions per second (on Mac OS X 10.15.7).
* The `structuredClone` function is slightly slower, with an average execution speed of around 440976.0 executions per second.
* The `_.cloneDeep` function has a moderate performance, with an average execution speed of around 219704.125 executions per second.

**Browser and Platform Variations**

* The benchmark results are consistent across different browsers (Chrome 113) and platforms (Desktop).
* However, there's some variation in the results when considering different operating systems (Mac OS X 10.15.7).

**Potential Causes for Performance Differences**

* It's possible that the performance differences between `deepClone`, `structuredClone`, and `_.cloneDeep` are due to differences in implementation, algorithmic complexity, or optimization techniques used by each function.
* The variations in execution speed across different browsers and platforms could be attributed to differences in hardware capabilities, software configurations, or other external factors.

**Next Steps**

* If you're interested in optimizing the performance of your benchmark, you may want to consider experimenting with different algorithmic approaches, caching mechanisms, or parallel processing techniques.
* Additionally, analyzing the benchmark results for specific patterns or outliers could provide valuable insights into potential bottlenecks or areas for improvement.

However, without more information about the implementation details and requirements of the benchmark, it's challenging to provide a more in-depth analysis or concrete recommendations.

clone perf tests2 (version: 1) Benchmark.js

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

Created: 3 years ago by: Registered User

Go to the latest result

_.cloneDeep(objectToClone)

structuredClone(objectToClone)

deepClone(objectToClone)

_.cloneDeep(proxyToClone)

structuredClone(proxyToClone)

deepClone(proxyToClone)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

clone perf tests2 (version: 1) Benchmark.js

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

Created: 3 years ago by: Registered User

Go to the latest result

_.cloneDeep(objectToClone)

structuredClone(objectToClone)

deepClone(objectToClone)

_.cloneDeep(proxyToClone)

structuredClone(proxyToClone)

deepClone(proxyToClone)

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: `_.cloneDeep(objectToClone) vs structuredClone(objectToClone) vs deepClone(objectToClone) vs _.cloneDeep(proxyToClone) vs structuredClone(proxyToClone) vs deepClone(proxyToClone)`