Benchmark: JSON parse JSON stringify vs structuredClone

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var MyObject = {
  description: 'Creates a deep copy of source, which should be an object or an array.',
  myNumber: 123456789,
  myBoolean: true,
  jayson: {
    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
    parse: 'JSON.parse() method parses a JSON string...'
  }
};

var myCopy = null;

Tests:

Parse/Stringify
myCopy = JSON.parse(JSON.stringify(MyObject));
Native structuredClone
myCopy = structuredClone(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Parse/Stringify
Native structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

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

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
Parse/Stringify	632090.3 Ops/sec
Native structuredClone	272840.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Overview**

The benchmark compares the performance of two approaches to create a deep copy of an object: `JSON.parse(JSON.stringify(obj))` and the native `structuredClone()` method (introduced in JavaScript 2020).

**Options Compared**

There are two options being compared:

1. **JSON.parse(JSON.stringify(obj))**: This approach uses the `JSON.stringify()` method to serialize the object, and then parses the resulting string using `JSON.parse()`. This method is widely supported but can be slower due to the overhead of serializing and parsing the object.
2. **structuredClone(obj)**: This approach uses a native method introduced in JavaScript 2020, which creates a deep copy of an object without serialization or deserialization.

**Pros and Cons**

* **JSON.parse(JSON.stringify(obj))**:
	+ Pros:
		- Widely supported across browsers and platforms.
		- Can be used with older browsers that don't support `structuredClone()`.
	+ Cons:
		- Can be slower due to serialization and parsing overhead.
		- May not work correctly with certain data types (e.g., dates, functions).
* **structuredClone(obj)**:
	+ Pros:
		- Faster than the JSON-based approach, as it avoids serialization and deserialization overhead.
		- More efficient for large objects or complex data structures.
	+ Cons:
		- Requires JavaScript 2020 or later to use.
		- May not work correctly with older browsers or platforms.

**Library/Functionality Used**

* `lodash.min.js` is included in the benchmark preparation code, but it's not used in the actual benchmark. It might be used in other benchmarks on MeasureThat.net.

**Special JS Feature/Syntax**

The benchmark uses a feature introduced in JavaScript 2020: `structuredClone()`. This method creates a deep copy of an object without serialization or deserialization, making it more efficient than the JSON-based approach.

**Alternatives**

If you want to create a deep copy of an object, you can also use:

1. **Array.prototype.slice.call() + Object.assign()**: This approach creates a shallow copy of an array and then uses `Object.assign()` to create a deep copy.
2. **JSON.parse(JSON.stringify(obj))` with custom replacer function: You can pass a custom replacer function to the `JSON.stringify()` method to create a more efficient serialization process.

Keep in mind that these alternatives might have different performance characteristics or requirements depending on your specific use case.

**Benchmark Result Interpretation**

The benchmark results show the number of executions per second for each approach. A higher value indicates better performance. In this case, the `structuredClone()` approach outperforms the JSON-based approach, which is expected due to its more efficient serialization and deserialization process.

When interpreting the results, consider factors like:

* The size and complexity of your objects.
* The browser or platform you're using.
* The specific use case or performance requirements.

You can adjust your benchmarking approach based on these factors and explore alternative methods for creating deep copies of objects in JavaScript.

Related benchmarks:

JSON parse JSON stringify vs structuredClone (version: 0)

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Comparing performance of: Parse/Stringify vs Native structuredClone

Created: 3 years ago by: Guest

Jump to the latest result

Parse/Stringify

Native structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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