Benchmark: JSON Clone vs Clone

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/clone@2.1.2/clone.min.js"></script>

Script Preparation code:

var sampleObject = [{
        "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:

Json clone
myCopy = JSON.parse(JSON.stringify(sampleObject));
Clone
myCopy = clone(sampleObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Json clone
Clone

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 124 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Json clone	261005.2 Ops/sec
Clone	87016.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the benchmark, its test cases, and the options being compared.

**Benchmark Overview**

The MeasureThat.net website allows users to create and run JavaScript microbenchmarks. In this specific benchmark, two different approaches are being compared: JSON cloning using `JSON.parse(JSON.stringify())` (also known as "deep cloning") and a library-based approach called Clone (https://cdn.jsdelivr.net/npm/clone@2.1.2/clone.min.js).

**Test Cases**

There are only two test cases:

1. **"Json clone"`**: This test case uses the built-in `JSON.parse(JSON.stringify())` method to create a deep copy of the `sampleObject`.
2. **"Clone"`**: This test case uses the Clone library to create a deep copy of the `sampleObject`.

**Options Being Compared**

The two options being compared are:

* **Built-in JSON Cloning**: The `JSON.parse(JSON.stringify())` method, which is a built-in JavaScript function.
* **Library-based Cloning (Clone)**: The Clone library, which provides a more efficient and robust way of cloning objects.

**Pros and Cons**

**Built-in JSON Cloning**

Pros:

* Fast and lightweight
* Widely supported by most modern browsers

Cons:

* Can be slower than the Clone library for large objects due to its recursive nature
* May not work correctly with all types of objects (e.g., functions, dates)

**Clone Library**

Pros:

* More efficient and robust than built-in JSON cloning
* Supports a wider range of object types
* Faster execution times for large objects

Cons:

* Requires an additional library download
* May have slightly higher overhead due to its extra functionality

**Other Considerations**

When choosing between these two options, consider the following factors:

* **Object size and complexity**: If you're working with very large or complex objects, the Clone library may perform better.
* **Browser support**: If you need to support older browsers, the built-in JSON cloning method might be a better choice.
* **Code simplicity**: If you prefer a simple, straightforward approach, the built-in JSON cloning method might be sufficient.

**Additional Notes on Test Cases**

In the provided test cases, both approaches create a deep copy of the `sampleObject` using either `JSON.parse(JSON.stringify())` or the Clone library. The Clone library provides more efficient and robust cloning capabilities, which may result in faster execution times for larger objects.

Overall, this benchmark allows users to compare the performance and efficiency of two different cloning methods in JavaScript, providing valuable insights into the best approach for specific use cases.

Related benchmarks:

JSON Clone vs Clone (version: 0)

Comparing performance of: Json clone vs Clone

Created: 2 years ago by: Guest

Jump to the latest result

Json clone

Clone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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