Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
structuredClone vs alternatives
(version: 0)
Comparing performance of:
Lodash cloneDeep vs structuredClone vs custom
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
Script Preparation code:
var testArray = [{ description: 'Random description.', testNumber: 123456789, testBoolean: true, testObject: { testString: 'test string', testNumber: 12345 }, testArray: [{ myName: 'test name', myNumber: 123245 }] }, { description: 'Random description.', testNumber: 123456789, testBoolean: true, testObject: { testString: 'test string', testNumber: 12345 }, testArray: [{ myName: 'test name', myNumber: 123245 }] },[{ description: 'Random description.', testNumber: 123456789, testBoolean: true, testObject: { testString: 'test string', testNumber: 12345 }, testArray: [{ myName: 'test name', myNumber: 123245 }] }, { description: 'Random description.', testNumber: 123456789, testBoolean: true, testObject: { testString: 'test string', testNumber: 12345 }, testArray: [{ myName: 'test name', myNumber: 123245 }] }]]; var testCopy = null; function cloneJSON(value) { if (typeof value !== 'object' || value === null) { return value; } else if (Array.isArray(value)) { const copy = new Array(value.length); for (let i = 0, e; i < value.length; i++) { e = value[i]; copy[i] = (typeof e !== 'object' || e === null ? e : cloneJSON(e)); } return copy; } else { const ret = {}; for (const k in value) { const v = value[k]; ret[k] = typeof v !== 'object' || v === null ? v : cloneJSON(v); } return ret; } }
Tests:
Lodash cloneDeep
testCopy = _.cloneDeep(testArray);
structuredClone
testCopy = structuredClone(testArray);
custom
testCopy = cloneJSON(testArray);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Lodash cloneDeep
structuredClone
custom
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
14 days ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36 Edg/147.0.0.0
Browser/OS:
Chrome 147 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Lodash cloneDeep
386774.5 Ops/sec
structuredClone
351400.2 Ops/sec
custom
2564733.2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Overview** The benchmark compares three approaches to create a deep copy of an object in JavaScript: Lodash `cloneDeep`, `structuredClone`, and a custom implementation (`cloneJSON`). **Options Compared** 1. **Lodash `cloneDeep`**: Lodash is a popular utility library for functional programming tasks. `cloneDeep` is a function that creates a deep copy of an object, recursively copying all properties and nested objects. 2. **`structuredClone`**: This is a new JavaScript feature introduced in ECMAScript 2020 (ES2020). It provides a way to create a deep clone of an object without the need for a custom implementation or a library like Lodash. 3. **Custom Implementation (`cloneJSON`)**: The custom implementation is a simple function that recursively copies all properties and nested objects using a basic approach. **Pros and Cons** 1. **Lodash `cloneDeep`**: * Pros: Widely supported, well-tested, and efficient. * Cons: Requires an additional library dependency. 2. **`structuredClone`**: * Pros: Native support in modern browsers (Chrome 122 and above), no external dependencies required. * Cons: Introduced in ES2020, might not be supported in older browsers or environments. 3. **Custom Implementation (`cloneJSON`)**: * Pros: Simple, lightweight, and doesn't require any additional libraries. * Cons: May not be as efficient or robust as the other two options. **Library Usage** Lodash is used in the benchmark to provide a widely accepted implementation for creating deep copies of objects. The `structuredClone` function is used directly in the benchmark, relying on its native support in modern browsers. **Special JS Features/Syntax** No special JavaScript features or syntax are being tested in this benchmark. All options use standard JavaScript object properties and iteration methods. **Other Alternatives** If you're interested in exploring alternative approaches to creating deep copies of objects, consider: * Using `JSON.parse(JSON.stringify(obj))` with caution (not recommended for complex objects) * Implementing a custom deep copy function using bitwise operations or recursion * Utilizing other libraries like Immutable.js or Ramda Keep in mind that the choice of approach depends on your specific requirements, such as performance, compatibility, and maintainability.
Related benchmarks:
Test method Object
isArray Test
isArray_vs_instanceof
isarray_vs_instanceof_vs_tostring
indexOf vs multiple === vs object selection
Comments
Confirm delete:
Do you really want to delete benchmark?