Benchmark: klona vs structuredClone vs Lodash cloneDeep

HTML Preparation code:

<script src="https://unpkg.com/klona@2.0.6/dist/index.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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
klona
structuredClone
cloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month 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

Test name	Executions per second
klona	628125.1 Ops/sec
structuredClone	115458.9 Ops/sec
cloneDeep	107803.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition**

The benchmark measures the performance difference between three cloning functions: `klona`, `structuredClone`, and `_.cloneDeep`. Cloning is the process of creating a new, independent copy of an object.

**Test Cases**

There are three test cases:

1. **`klona(MyObject)`**: This function clones `MyObject` using the `klona` library.
2. **`structuredClone(MyObject)`**: This function clones `MyObject` using the built-in `structuredClone` method (introduced in ECMAScript 2020).
3. **`_.cloneDeep(MyObject)`**: This function clones `MyObject` using the `_.cloneDeep` function from Lodash.

**Options Compared**

The three options are compared in terms of their performance:

1. **Cloning a nested object with multiple properties and sub-properties** (e.g., `MyObject`)
2. Cloning an array

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

### Klona

Pros:

* Specifically designed for cloning objects
* Optimized for performance
* Supports cloning arrays, functions, and other types of values

Cons:

* Requires importing an additional library (`klona`)
* May have a higher overhead due to its specialized implementation

### Structured Clone

Pros:

* Built-in method with low overhead
* Fast and efficient
* Supports cloning most types of values (including objects, arrays, functions)

Cons:

* Introduced in ECMAScript 2020, so may not support older browsers or environments
* May not work as expected for certain edge cases (e.g., cyclic references)

### Lodash _.cloneDeep

Pros:

* Well-maintained and widely adopted library
* Supports cloning deeply nested objects with complex hierarchies
* Has a large community of developers who contribute to its maintenance and optimization

Cons:

* Requires importing an additional library (`lodash`)
* May have a higher overhead due to its larger implementation size

**Library: Klona**

Klona is a lightweight, fast, and efficient cloning library specifically designed for cloning objects in JavaScript. It supports cloning arrays, functions, and other types of values.

**Special JS Feature/Syntax: structuredClone**

The `structuredClone` method was introduced in ECMAScript 2020 as part of the web standard for handling complex data structures. It's a built-in method that allows you to create a deep copy of an object or array using a minimal amount of code.

**Conclusion**

In summary, the three cloning functions (`klona`, `structuredClone`, and `_.cloneDeep`) have different strengths and weaknesses when it comes to performance, simplicity, and feature support. The choice of which one to use depends on your specific requirements and preferences.

If you're looking for a lightweight and efficient solution with low overhead, Klona might be the best choice.

If you need to support older browsers or environments, the built-in `structuredClone` method could be a good option.

Finally, if you want a robust and widely adopted library that supports cloning deeply nested objects, Lodash _.cloneDeep is a solid choice.

Related benchmarks:

klona vs structuredClone vs Lodash cloneDeep (version: 0)

Comparing performance of: klona vs structuredClone vs cloneDeep

Created: one year ago by: Guest

Jump to the latest result

klona

structuredClone

cloneDeep

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