Benchmark: JSON.stringify + JSON.parse vs structuredClone on arrays

Script Preparation code:

const arrays = [
    [1, 2, 3, 5, 6],
    [0, 0, 0, 0, 0],
    [40, 23, 63, 19, 30]
];

Tests:

JSON.stringify + JSON.parse
JSON.parse(JSON.stringify(arrays));
structuredClone
structuredClone(arrays);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.stringify + JSON.parse
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Windows

View result in a separate tab

Test name	Executions per second
JSON.stringify + JSON.parse	2014041.1 Ops/sec
structuredClone	541013.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares two different methods for deep copying JavaScript arrays: **JSON.stringify + JSON.parse** and **structuredClone**.

### Options Compared:

1. **JSON.stringify + JSON.parse**
   - **Test Name**: "JSON.stringify + JSON.parse"
   - **Benchmark Definition**: `JSON.parse(JSON.stringify(arrays));`

2. **structuredClone**
   - **Test Name**: "structuredClone"
   - **Benchmark Definition**: `structuredClone(arrays);`

### Purpose of Each Option:

- **JSON.stringify + JSON.parse**:
  - This approach utilizes the JSON methods to serialize the array to a JSON string and then parse it back into a JavaScript object. This technique is typically used for deep cloning because it creates a new instance of the array with all nested structures copied over.
  - **Pros**:
    - Simple to use and widely understood by developers.
    - Works well with plain objects and arrays that can be represented in JSON format.
  - **Cons**:
    - Loses all functions and methods, and cannot handle undefined, Infinity, or special object types (e.g., Map, Set, Date).
    - Can be slow for large data sets due to serialization overhead.
  
- **structuredClone**:
  - This is a built-in JavaScript function that creates a deep copy of the given object, including more complex structures like Date objects, Map, Set, and Typed Arrays.
  - **Pros**:
    - Handles a wider range of data types compared to JSON methods.
    - Generally more efficient for complex structures since it does not require serialization and deserialization.
  - **Cons**:
    - Not as widely supported in older browsers (e.g., it is well-supported in modern browsers but may require polyfills for others).
    - There may be nuances in how certain objects are copied, which could lead to different performance outcomes or behaviors.

### Benchmark Results:
From the benchmark results:

- The execution speed for **JSON.stringify + JSON.parse** was about **2,014,041.125 executions per second**, while **structuredClone** operated at **541,013.3125 executions per second**. 
- This suggests that in this specific test on the provided data, **JSON.stringify + JSON.parse** was significantly faster than **structuredClone**, despite the latter's advantages in handling various data types robustly.

### Other Considerations:
- **Use Cases**: The choice between these methods often depends on the specific use case. If your data structures are simple and lack functions, then using JSON methods may suffice. However, if you require a deeper cloning mechanism for more complex data structures, `structuredClone` is more appropriate.
- **Alternatives**: There are also other libraries and methods for deep cloning, such as:
  - **Lodash's cloneDeep**: A widely-used utility library that provides a robust cloning solution, effectively handling many edge cases.
  - **shallowCopy**: A method to clone only the first level of an object or array (useful for objects where you only want a shallow copy).
  - **Custom cloning functions**: Developers can always write their own cloning functions tailored for their specific set of requirements.

In conclusion, while **JSON.stringify + JSON.parse** may offer speed advantages in certain scenarios, the choice of cloning strategy should consider data complexity, browser compatibility, and long-term maintainability of the code.

Related benchmarks:

JSON.stringify + JSON.parse vs structuredClone on arrays (version: 1)

Comparing performance of: JSON.stringify + JSON.parse vs structuredClone

Created: one year ago by: Guest

Jump to the latest result

JSON.stringify + JSON.parse

structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):