Benchmark: klona vs Lodash cloneDeep vs native structuredClone

HTML Preparation code:

<script src="https://unpkg.com/klona@2.0.5/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);
native 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
native structuredClone
cloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Measuring the performance of different cloning methods in JavaScript can be an interesting topic.

**Benchmark Overview**

The benchmark measures the time taken by three different cloning methods:

1. `klona` (also known as "jsonclone" or "deep clone"): a custom implementation that creates a deep copy of an object.
2. `lodash.cloneDeep`: a function from the popular `lodash` library that provides a deep cloning method.
3. The native JavaScript method: `structuredClone`, which is a relatively new feature introduced in ECMAScript 2020.

**Comparison**

Let's dive into each method:

1. **klona**: This implementation creates a deep copy of an object by recursively traversing the object's properties and creating new objects for each nested property. The pros of this method are:
	* Simple to implement (no external dependencies).
	* Works well with recursive data structures.
However, the cons are:
	* Can be slower than other methods due to the overhead of recursive function calls.
2. **lodash.cloneDeep**: This method uses a combination of object creation and property assignment to create a deep copy of an object. The pros of this method are:
	* Fast and efficient (due to optimized implementation).
	* Works well with both simple and complex data structures.
However, the cons are:
	* Requires including the `lodash` library as a dependency.
3. **native structuredClone**: This method uses the native JavaScript feature introduced in ECMAScript 2020, which creates a deep copy of an object without the need for explicit recursion or loops. The pros of this method are:
	* Fast and efficient (due to native implementation).
	* Does not require including any external libraries.
However, the cons are:
	* Only works in modern browsers that support ECMAScript 2020.

**Other Considerations**

When choosing a cloning method, consider the following factors:

* **Performance**: If speed is critical, `structuredClone` might be the best choice. However, if you're targeting older browsers or environments without native support for this feature, `lodash.cloneDeep` could be a good alternative.
* **Code complexity and readability**: `klona` provides a simple and straightforward implementation, while `lodash.cloneDeep` is more concise but may require some familiarity with the library's internal workings. `structuredClone`, being a native feature, has an extremely simple and readable implementation.
* **External dependencies**: If you're working on a project that doesn't want to include external libraries, `klona` or `structuredClone` might be better choices.

**Conclusion**

In conclusion, each cloning method has its strengths and weaknesses. When choosing the best approach for your specific use case, consider factors like performance, code complexity, and external dependencies.

Related benchmarks:

klona vs Lodash cloneDeep vs native structuredClone (version: 0)

Comparing performance of: klona vs native structuredClone vs cloneDeep

Created: 3 years ago by: Guest

Jump to the latest result

klona

native structuredClone

cloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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