<script src="https://cdn.jsdelivr.net/npm/rfdc@1.1.4/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ungap/structured-clone@1.0.1/cjs/index.min.js"></script>
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;
myCopy = _.cloneDeep(sampleObject);
myCopy = JSON.parse(JSON.stringify(sampleObject));
var clone = rfdc();
myCopy = clone(sampleObject);
myCopy = structuredClone(sampleObject);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Lodash cloneDeep | |
Json clone | |
RFDC copy | |
structured clone |
Test name | Executions per second |
---|---|
Lodash cloneDeep | 30415.7 Ops/sec |
Json clone | 73735.8 Ops/sec |
RFDC copy | 210206.9 Ops/sec |
structured clone | 30369.9 Ops/sec |
The provided benchmark measures the performance of different methods for cloning a nested JavaScript object. The test cases use various libraries and techniques to create copies of the input object, which is a complex JSON data structure.
Here's a breakdown of each test case:
cloneDeep
function to create a deep copy of the input object. Lodash is a popular JavaScript utility library that provides various functions for tasks such as array manipulation, string manipulation, and more. In this context, cloneDeep
creates a new object with the same structure and values as the original object.JSON.parse(JSON.stringify(obj))
syntax to create a deep copy of the input object. This syntax serializes the object to a JSON string, then parses it back into an object, effectively creating a new object with the same structure and values as the original.rfdc()
function to create a deep copy of the input object. RFDC is a lightweight library specifically designed for deep cloning JavaScript objects.In summary, each test case creates a new object using a different technique:
The benchmark measures the performance of these methods by executing each test case multiple times and reporting the average execution time per second.
When comparing these results, we can see that:
However, it's essential to note that performance differences may vary depending on the specific use case, input data size, and other factors. These results should be interpreted with caution and may not reflect your own experience or requirements.
If you're interested in understanding the underlying implementation details of each method, I can provide more information on Lodash cloneDeep, RFDC Copy, and Structured Clone.