Overview of the Benchmark

MeasureThat.net is used to compare the performance of different methods for cloning and copying JavaScript objects, specifically JSON arrays (Uint8Arrays). The benchmark is designed to test the execution speed of three approaches:

1. Lodash's cloneDeep method
2. Native structuredClone function (introduced in modern browsers)
3. JSON parsing with JSON.stringify and JSON.parse

Options Comparison

Here's a brief overview of each approach, their pros and cons, and considerations:

1. Lodash's cloneDeep method
   • Pros: Robust, well-tested, and widely adopted.
   • Cons: Adds external dependency (Lodash), may introduce additional overhead due to function call.
2. Native structuredClone function
   • Pros: Fast, efficient, and designed for web use cases.
   • Cons: Introduced in modern browsers, might not be supported in older browsers or environments.
3. JSON parsing with JSON.stringify and JSON.parse
   • Pros: Simple, widely supported, and does not require external dependencies.
   • Cons: May incur additional overhead due to stringification and parse operations.

Library Usage - Lodash

Lodash is a popular JavaScript utility library that provides a wide range of functions for various tasks. In this benchmark, cloneDeep is used to create a deep copy of the input object (MyObject). The cloneDeep function recursively clones all properties and sub-properties of the original object.

Special JS Feature - structuredClone

The structuredClone function is a new feature introduced in modern browsers (Chrome 72+, Firefox 66+, Edge 83+) that allows creating exact copies of objects, including arrays and maps. It is designed to replace functions like JSON.parse(JSON.stringify()) for efficient cloning.

Benchmark Preparation Code

The script preparation code creates an array (MyObject) with 5MB size, populates it with random values between 0 and 255, and then initializes a variable myCopy to be cloned using each of the three methods.

Test Cases

Each test case uses one of the cloning methods:

1. Lodash's cloneDeep method
2. Native structuredClone function
3. JSON parsing with JSON.stringify and JSON.parse

Benchmark Results

The benchmark results show the execution speed (executions per second) for each test case on a Chrome 108 desktop environment. The native structuredClone function appears to be the fastest, followed by JSON parsing, and then Lodash's cloneDeep method.

Alternatives

Other alternatives for cloning JavaScript objects include:

1. Array.prototype.slice(): Creates a shallow copy of an array.
2. Object.assign(): Creates a new object with copies of all properties from the source object.
3. **JSON.parse(JSON.stringify(object))`: A simple, widely supported method that creates a deep copy of an object.

However, these alternatives may incur additional overhead or have limitations (e.g., not supporting maps).

Keep in mind that this benchmark is specific to cloning JSON arrays and might not be representative for other use cases or objects. Always consider the specific requirements and constraints of your application when choosing a cloning method.