Benchmark: deep clone2 - MeasureThat.net

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/ivolovikov/fastest-clone/master/index.js"></script>

​x
 
​
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/ivolovikov/fastest-clone/master/index.js"></script>

Script Preparation code:

var source = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}};
//var source = {a:1};
//var CloneFactory = FastClone.factory(source);

function clone(value) {
        var type = typeof value;
        switch (type) {
            case 'object':
                // null and undefined
                if (value == null) {
                    return value;
                }
                var result = void 0;
                if (value instanceof Date) {
                    result = new Date();
                    result.setTime(value.getTime());
                    return result;
                }
                else if (value instanceof RegExp) {
                    result = newRegExp(value);
                    return result;
                }
                result = JSON.parse(JSON.stringify(value));
                fixTypes(value, result);
                return result;
            default:
                return value;
        }
    }
    function fixPropertyValue(original, copy, key) {
        var originalValue = original[key];
        var originalType = typeof originalValue;
        switch (originalType) {
            case 'object':
                if (originalValue instanceof Date) {
                    var newValue = new Date();
                    newValue.setTime(originalValue.getTime());
                    copy[key] = newValue;
                }
                else if (originalValue instanceof RegExp) {
                    copy[key] = newRegExp(originalValue);
                }
                else if (originalValue == null) {
                    copy[key] = originalValue;
                }
                else {
                    fixTypes(originalValue, copy[key]);
                }
                break;
            case 'number':
                if (isNaN(originalValue)) {
                    copy[key] = NaN;
                }
                else if (originalValue == Infinity) {
                    copy[key] = Infinity;
                }
                break;
            default:
                break;
        }
    }
    function fixTypes(original, copy) {
        if (original instanceof Array) {
            for (var index = 0; index < original.length; index++) {
                fixPropertyValue(original, copy, index);
            }
        }
        else {
            var keys = Object.getOwnPropertyNames(original);
            keys.forEach(function (key) {
                fixPropertyValue(original, copy, key);
            });
        }
    }
    function newRegExp(value) {
        var regexpText = String(value);
        var slashIndex = regexpText.lastIndexOf('/');
        return new RegExp(regexpText.slice(1, slashIndex), regexpText.slice(slashIndex + 1));
    }

 
var source = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}};//var source = {a:1};//var CloneFactory = FastClone.factory(source);​function clone(value) {        var type = typeof value;        switch (type) {            case 'object':                // null and undefined                if (value == null) {                    return value;                }                var result = void 0;                if (value instanceof Date) {                    result = new Date();                    result.setTime(value.getTime());                    return result;                }                else if (value instanceof RegExp) {                    result = newRegExp(value);                    return result;                }                result = JSON.parse(JSON.stringify(value));                fixTypes(value, result);                return result;            default:                return value;        }    }    function fixPropertyValue(original, copy, key) {        var originalValue = original[key];        var originalType = typeof originalValue;        switch (originalType) {            case 'object':                if (originalValue instanceof Date) {                    var newValue = new Date();                    newValue.setTime(originalValue.getTime());                    copy[key] = newValue;                }                else if (originalValue instanceof RegExp) {                    copy[key] = newRegExp(originalValue);                }                else if (originalValue == null) {                    copy[key] = originalValue;                }                else {                    fixTypes(originalValue, copy[key]);                }                break;            case 'number':                if (isNaN(originalValue)) {                    copy[key] = NaN;                }                else if (originalValue == Infinity) {                    copy[key] = Infinity;                }                break;            default:                break;        }    }    function fixTypes(original, copy) {        if (original instanceof Array) {            for (var index = 0; index < original.length; index++) {                fixPropertyValue(original, copy, index);            }        }        else {            var keys = Object.getOwnPropertyNames(original);            keys.forEach(function (key) {                fixPropertyValue(original, copy, key);            });        }    }    function newRegExp(value) {        var regexpText = String(value);        var slashIndex = regexpText.lastIndexOf('/');        return new RegExp(regexpText.slice(1, slashIndex), regexpText.slice(slashIndex + 1));    }

Tests:

JSON parse

var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello'];
 //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}};
var deep = JSON.parse(JSON.stringify(objects));

 
var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello']; //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}};var deep = JSON.parse(JSON.stringify(objects));

_.deepClone

var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello'];
 //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}};
var deep = _.cloneDeep(objects);

 
var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello']; //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}};var deep = _.cloneDeep(objects);

fast-clone

 //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}};
var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello'];
var deep = clone(objects);

 
 //var objects = {a:1,b:1,c:1,d:1,e:1,f:1,g:1,h:{a:-1,b:1,c:1,d:1,e:1,f:1,g:1}};var objects = [{ 'a': 1 }, { 'b': 2, c: 3, d: 4 }, {c:3}, 4, 5, 6 ,'hello'];var deep = clone(objects);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
JSON parse
_.deepClone
fast-clone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
JSON parse	315053.4 Ops/sec
_.deepClone	282218.6 Ops/sec
fast-clone	85869.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Let's dive into the world of JavaScript microbenchmarks.

Benchmark Definition

The benchmark compares three methods for creating a deep clone of an object:

The new ES6 spread operator ({...obj}).
The traditional concat() method (by joining arrays and objects with dots or brackets).
A custom cloning function clone() that handles various types, including dates, regular expressions, and primitive values.

Options Compared

The benchmark compares two methods:

ES6 Spread Operator ({...obj}): This method creates a shallow copy of the object by spreading its properties into a new object.
_.deepClone (Lodash's Deep Clone): This method creates a deep copy of the object by recursively cloning its properties.

Pros and Cons

**ES6 Spread Operator ({...obj})`:
- Pros: Simple, concise, and efficient for shallow copies.
- Cons: Fails for objects with nested arrays or other complex structures. Does not handle dates, regular expressions, or primitive values correctly.
_.deepClone (Lodash's Deep Clone):
- Pros: Handles nested arrays, objects, dates, regular expressions, and primitive values correctly. Provides a more robust cloning function.
- Cons: May be slower due to the recursive nature of the cloning process.

Library Used

The benchmark uses two libraries:

Lodash ( _.cloneDeep ): A popular JavaScript utility library that provides various functions for manipulating data structures, including deep cloning.
FastClone: A custom cloning function implemented by the benchmark creator. This function is not a widely recognized library but demonstrates an alternative approach to cloning.

Special JS Feature/Syntax

The benchmark utilizes ES6 features:

The new spread operator ({...obj}) for creating shallow copies of objects.
The dot notation (e.g., objects.a) and bracket notation (e.g., objects['a']) for accessing object properties.

Benchmark Results

The latest benchmark results show the following performance characteristics:

JSON parse: All three methods are relatively fast, with Chrome 87 executing approximately 315,053 times per second.
_.deepClone: This method is slower than the ES6 spread operator and FastClone, with around 282,218 executions per second. However, it provides a more robust cloning function for handling complex data structures.

In summary, the benchmark highlights the trade-offs between different methods for creating deep clones of objects in JavaScript. The ES6 spread operator offers a simple and efficient solution for shallow copies, while Lodash's _.deepClone provides a more comprehensive cloning function for handling complex data structures.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition**

The benchmark compares three methods for creating a deep clone of an object:

1. The new ES6 spread operator (`{...obj}`).
2. The traditional `concat()` method (by joining arrays and objects with dots or brackets).
3. A custom cloning function `clone()` that handles various types, including dates, regular expressions, and primitive values.

**Options Compared**

The benchmark compares two methods:

1. **ES6 Spread Operator (`{...obj}`)**: This method creates a shallow copy of the object by spreading its properties into a new object.
2. **_.deepClone (Lodash's Deep Clone)**: This method creates a deep copy of the object by recursively cloning its properties.

**Pros and Cons**

*   **ES6 Spread Operator (`{...obj}`)`:
    *   Pros: Simple, concise, and efficient for shallow copies.
    *   Cons: Fails for objects with nested arrays or other complex structures. Does not handle dates, regular expressions, or primitive values correctly.
*   **_.deepClone (Lodash's Deep Clone)**:
    *   Pros: Handles nested arrays, objects, dates, regular expressions, and primitive values correctly. Provides a more robust cloning function.
    *   Cons: May be slower due to the recursive nature of the cloning process.

**Library Used**

The benchmark uses two libraries:

*   **Lodash ( _.cloneDeep )**: A popular JavaScript utility library that provides various functions for manipulating data structures, including deep cloning.
*   **FastClone**: A custom cloning function implemented by the benchmark creator. This function is not a widely recognized library but demonstrates an alternative approach to cloning.

**Special JS Feature/Syntax**

The benchmark utilizes ES6 features:

*   The new spread operator (`{...obj}`) for creating shallow copies of objects.
*   The dot notation (e.g., `objects.a`) and bracket notation (e.g., `objects['a']`) for accessing object properties.

**Benchmark Results**

The latest benchmark results show the following performance characteristics:

*   **JSON parse**: All three methods are relatively fast, with Chrome 87 executing approximately 315,053 times per second.
*   **_.deepClone**: This method is slower than the ES6 spread operator and FastClone, with around 282,218 executions per second. However, it provides a more robust cloning function for handling complex data structures.

Related benchmarks:

deep clone2 (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: JSON parse vs _.deepClone vs fast-clone

Created: 4 years ago by: Guest

Jump to the latest result