Benchmark: JSON parse 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:

JSON parse
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
JSON parse
Native structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Windows

View result in a separate tab

Test name	Executions per second
JSON parse	642880.9 Ops/sec
Native structuredClone	683829.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

On the provided JSON, two individual test cases are defined to compare the performance of two approaches: `JSON.parse()` and `structuredClone()`. The tests aim to create a deep copy of an object (`MyObject`) and measure the execution time for each approach.

**Options compared**

The options being compared are:

1. **`JSON.parse(JSON.stringify(MyObject))`**: This method uses the `JSON.stringify()` function to serialize the object, creates a new string representation of the object, and then parses it back into an object using `JSON.parse()`. The resulting object is a shallow copy of the original.
2. **`structuredClone(MyObject)`**: This is a native JavaScript function introduced in ECMAScript 2020 (ES10) that creates a deep clone of an object.

**Pros and cons**

* **Shallow copy with `JSON.parse(JSON.stringify())`**:
	+ Pros: widely supported, easy to implement.
	+ Cons: can lead to unexpected behavior if the original object has circular references or other complex structures. The resulting copy may not be a true deep copy.
* **Deep clone with `structuredClone()`**:
	+ Pros: guarantees a deep and accurate copy of the original object, handles complex structures and circular references correctly.
	+ Cons: only supported in modern browsers that have implemented ES10.

**Library and its purpose**

The provided HTML includes a reference to Lodash.js, which is a utility library. In this specific benchmark, Lodash's `structuredClone()` function is used as the native implementation for deep cloning objects.

**Special JS feature or syntax**

`structuredClone()` is a special JavaScript feature introduced in ECMAScript 2020 (ES10). It's not widely supported yet and requires modern browsers that have implemented ES10. The benchmark uses this feature to test its performance.

**Other alternatives**

For non-modern browsers, other libraries like jQuery (1.4.x or later) provide a `clone()` method or similar functionality. However, the performance of these alternatives may vary compared to native implementations.

In summary, the provided benchmark tests two approaches for creating deep copies of objects: the widely supported but potentially shallow copy with `JSON.parse(JSON.stringify())`, and the modern, accurate copy with `structuredClone()`.

Related benchmarks:

JSON parse vs structuredClone (version: 0)

Test json

Comparing performance of: JSON parse vs Native structuredClone

Created: 3 years ago by: Guest

Jump to the latest result

JSON parse

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):