Benchmark: klona vs core-js structuredClone vs Lodash cloneDeep vs json parse stringify

HTML Preparation code:

<script src="https://unpkg.com/klona@2.0.5/dist/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.23.4/minified.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Script Preparation code:

var MyObject = [{
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "ppu": 0.55,
        "batters": {
            "batter": [{
                    "id": "1001",
                    "type": "Regular"
                },
                {
                    "id": "1002",
                    "type": "Chocolate"
                },
                {
                    "id": "1003",
                    "type": "Blueberry"
                },
                {
                    "id": "1004",
                    "type": "Devil's Food"
                }
            ]
        },
        "topping": [{
                "id": "5001",
                "type": "None"
            },
            {
                "id": "5002",
                "type": "Glazed"
            },
            {
                "id": "5005",
                "type": "Sugar"
            },
            {
                "id": "5007",
                "type": "Powdered Sugar"
            },
            {
                "id": "5006",
                "type": "Chocolate with Sprinkles"
            },
            {
                "id": "5003",
                "type": "Chocolate"
            },
            {
                "id": "5004",
                "type": "Maple"
            }
        ]
    },
    {
        "id": "0002",
        "type": "donut",
        "name": "Raised",
        "ppu": 0.55,
        "batters": {
            "batter": [{
                "id": "1001",
                "type": "Regular"
            }]
        },
        "topping": [{
                "id": "5001",
                "type": "None"
            },
            {
                "id": "5002",
                "type": "Glazed"
            },
            {
                "id": "5005",
                "type": "Sugar"
            },
            {
                "id": "5003",
                "type": "Chocolate"
            },
            {
                "id": "5004",
                "type": "Maple"
            }
        ]
    },
    {
        "id": "0003",
        "type": "donut",
        "name": "Old Fashioned",
        "ppu": 0.55,
        "batters": {
            "batter": [{
                    "id": "1001",
                    "type": "Regular"
                },
                {
                    "id": "1002",
                    "type": "Chocolate"
                }
            ]
        },
        "topping": [{
                "id": "5001",
                "type": "None"
            },
            {
                "id": "5002",
                "type": "Glazed"
            },
            {
                "id": "5003",
                "type": "Chocolate"
            },
            {
                "id": "5004",
                "type": "Maple"
            }
        ]
    }
];


var myCopy = null;

Tests:

klona
myCopy = klona(MyObject);
structuredClone
myCopy = structuredClone(MyObject);
cloneDeep
myCopy = _.cloneDeep(MyObject);
json parse stringify
myCopy = JSON.parse(JSON.stringify(MyObject));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
klona
structuredClone
cloneDeep
json parse stringify

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0

Browser/OS: Firefox 125 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
klona	313732.9 Ops/sec
structuredClone	59292.6 Ops/sec
cloneDeep	78681.8 Ops/sec
json parse stringify	236248.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and options compared, along with their pros and cons.

**Benchmark Definition**

The benchmark tests four different methods for cloning or serializing JavaScript objects:

1. `klona(MyObject)`
2. `structuredClone(MyObject)`
3. `_.cloneDeep(MyObject)` (using Lodash)
4. `JSON.parse(JSON.stringify(MyObject))`

**Options Compared**

Here's a brief overview of each option:

### Klona

Klona is a JavaScript library that provides a deep clone function for objects. It works by recursively traversing the object graph and creating new instances of all cloned properties.

Pros:

* Deep cloning, meaning it can handle complex object structures with nested objects and arrays.
* Fast execution speed.

Cons:

* Requires an external library (klona.js).
* May not work as expected with certain types of objects or data structures.

### Structured Clone

Structured clone is a new feature in JavaScript that allows for deep cloning of objects. It was introduced in ECMAScript 2020 and is supported by modern browsers like Firefox 125.

Pros:

* Built-in to modern browsers, so no external library is required.
* Fast execution speed.
* Handles complex object structures with ease.

Cons:

* Only supports modern browsers that have implemented the structured clone feature.
* May not work in older browsers or environments.

### Clone Deep (Lodash)

Clone deep is a function from the Lodash library that creates a deep copy of an object. It works by recursively traversing the object graph and creating new instances of all cloned properties.

Pros:

* Built-in to modern browsers using Web Workers, so no external library is required.
* Fast execution speed.
* Handles complex object structures with ease.

Cons:

* Requires an external library (Lodash.js).
* May not work as expected with certain types of objects or data structures.

### JSON.parse(JSON.stringify(MyObject))

This method uses the `JSON.stringify()` function to serialize the object and then parses the resulting string back into a new object using `JSON.parse()`. This creates a shallow copy of the original object, which means that only the top-level properties are cloned, and nested objects or arrays are not.

Pros:

* Built-in to most browsers and environments.
* Fast execution speed.
* Handles simple objects with ease.

Cons:

* Only handles shallow copying, meaning it doesn't create deep clones of complex objects.
* May not work as expected with certain types of objects or data structures.

**Benchmark Results**

The latest benchmark results show that Klona and Structured Clone have the highest execution speeds, while JSON.parse(JSON.stringify(MyObject)) has the lowest. However, Structured Clone's performance is only available in modern browsers, which may limit its use cases.

Related benchmarks:

klona vs core-js structuredClone vs Lodash cloneDeep vs json parse stringify (version: 0)

Comparing performance of: klona vs structuredClone vs cloneDeep vs json parse stringify

Created: 8 months ago by: Guest

Jump to the latest result

klona

structuredClone

cloneDeep

json parse stringify

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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