Benchmark: JSON.stringify vs structuredClone ++

Script Preparation code:

var MyObject = {
    description: 'Creates a deep copy of source, which should be an object or an array.',
    myNumber: 123456789,
    myDate: new Date(),
    myNullishVar: null,
    myUndefinedProp: undefined,
    myInfiniteVar: Infinity,
    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:

JSON.stringify + parse
myCopy = JSON.parse(JSON.stringify(MyObject));
structuredClone
myCopy = structuredClone(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.stringify + parse
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 12; Mobile; rv:109.0) Gecko/111.0 Firefox/111.0

Browser/OS: Firefox Mobile 111 on Android

View result in a separate tab

Test name	Executions per second
JSON.stringify + parse	134558.8 Ops/sec
structuredClone	109259.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON benchmark definition and test cases to understand what is being tested.

**Benchmark Definition JSON:**

The benchmark definition defines two microbenchmarks:

1. **JSON.stringify vs structuredClone ++**: This is the main comparison between the `JSON.stringify()` method and the `structuredClone` function.
2. The script preparation code creates a complex object `MyObject` with various properties, including objects, arrays, dates, nullish values, undefined props, and infinite values.
3. A variable `myCopy` is initialized to null.

**Script Preparation Code:**
```javascript
var MyObject = {
    description: 'Creates a deep copy of source, which should be an object or an array.',
    myNumber: 123456789,
    myDate: new Date(),
    myNullishVar: null,
    myUndefinedProp: undefined,
    myInfiniteVar: Infinity,
    jayson: {
        stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
        parse: 'JSON.parse() method parses a JSON string...'
    }
};

var myCopy = null;
```
**Html Preparation Code:** (empty, not applicable)

**Individual Test Cases:**

There are two test cases:

1. **"JSON.stringify + parse"`**: This test case uses the `JSON.stringify()` method to serialize `MyObject` and then parses the resulting string using `JSON.parse()`.
```javascript
myCopy = JSON.parse(JSON.stringify(MyObject));
```
2. **"structuredClone"`**: This test case uses the `structuredClone` function to create a deep copy of `MyObject`.

**Library:**

* `structuredClone`: This is a new JavaScript function introduced in ECMAScript 2020, which creates a deep copy of an object or array without serializing it into a string. The purpose of this function is to improve performance by avoiding the overhead of JSON serialization.

**Special JS Feature/Syntax:**

* No special features or syntax are mentioned in the benchmark definition.

**Pros and Cons:**

1. **JSON.stringify + parse**:
	* Pros:
		+ Wide support across browsers and platforms.
		+ Easy to implement.
	* Cons:
		+ Can be slow due to JSON serialization overhead.
		+ May not work correctly with certain data types or edge cases.
2. **structuredClone**:
	* Pros:
		+ New, optimized function for deep copying.
		+ Avoids JSON serialization overhead.
		+ Improved performance.
	* Cons:
		+ Limited browser support (Chrome 90+, Firefox 89+, Edge 88+).
		+ May require additional libraries or polyfills for older browsers.

**Other Alternatives:**

If the `structuredClone` function is not available, developers can use other approaches to create a deep copy of an object or array:

* **Recursive cloning**: Implement a recursive function that clones each property and its value.
* **Using `JSON.parse()` with `replacer` option**: Pass a `replacer` function to `JSON.parse()` to control the cloning process.

In summary, the benchmark tests the performance of two different methods for deep copying objects: `JSON.stringify + parse` and `structuredClone`. The `structuredClone` function is a new, optimized approach that avoids JSON serialization overhead, but it has limited browser support.

Related benchmarks:

JSON.stringify vs structuredClone ++ (version: 0)

Comparing performance of: JSON.stringify + parse vs structuredClone

Created: one year ago by: Guest

Jump to the latest result

JSON.stringify + parse

structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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