Benchmark: structuredClone vs Immer vs JSON.parse/stringify

HTML Preparation code:

<script type="module">
  import { produce } from 'https://cdn.jsdelivr.net/npm/immer@10.1.1/+esm';
  window.immerProduce = produce;
</script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uuid@10.0.0/dist/index.min.js"></script>

Script Preparation code:

const numSiblings = 500;
const depth = 3;

state = { field: 'f1', operator: '=', value: 'v1' };

Tests:

produce
const result = immerProduce(state, draft => { draft.id = crypto.randomUUID(); }); console.log(result);
structuredClone
const result = structuredClone(state); result.id = crypto.randomUUID(); console.log(result);
JSON back and forth
const result = JSON.parse(JSON.stringify({ ...state, id: crypto.randomUUID() })); console.log(result);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
produce
structuredClone
JSON back and forth

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
produce	197519.4 Ops/sec
structuredClone	228471.4 Ops/sec
JSON back and forth	248550.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test case on the website MeasureThat.net. The goal of this benchmark is to compare the performance and similarity of three approaches: using `Immer` library, `structuredClone`, and `JSON.parse/stringify`. Here's a breakdown of each approach:

1. **Immer**: Immer is a popular JavaScript library for functional updates to objects. It provides a simple way to update objects in a predictable and efficient manner. In this benchmark, it's used with the `produce` function from the `immer` package.
2. **structuredClone**: `structuredClone` is a built-in JavaScript method that creates a deep clone of an object. This approach does not use any external libraries and is designed to be efficient and accurate.
3. **JSON.parse/stringify**: This approach uses the `JSON.parse` and `JSON.stringify` methods to serialize and deserialize the input state object.

**Options Comparison**

The test case compares the performance and similarity of these three approaches for a specific use case: updating an object with a new value. The options compared are:

* **Immer**: `produce` function, which updates the original object using a draft.
* **structuredClone**: Directly clones the input state object without modifying it.
* **JSON.parse/stringify**: Serializes and deserializes the input state object.

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

1. **Immer**:
	* Pros: Efficient, predictable updates, and easy to use with functional programming concepts.
	* Cons: Requires an external library (`immer`), which may introduce additional overhead.
2. **structuredClone**:
	* Pros: Fast, accurate cloning, and does not require any external libraries.
	* Cons: May not be suitable for complex object graphs or nested structures.
3. **JSON.parse/stringify**:
	* Pros: Simple to implement and widely supported, but may incur additional overhead due to string serialization and deserialization.

**Library and Purpose**

The `immer` library provides a simple way to update objects in a predictable and efficient manner. It's designed for functional programming and provides a consistent API for updating objects.

**Special JS Features or Syntax**

None mentioned in the provided benchmark JSON. However, it's worth noting that some JavaScript features like async/await, ES6 classes, or destructuring might be used in more complex benchmarking scenarios.

**Other Alternatives**

For deep cloning, you could also consider using a library like `lodash` or `deepClone`. For functional updates, other libraries like `ramda` or `fnp` provide similar functionality.

Related benchmarks:

structuredClone vs Immer vs JSON.parse/stringify (version: 0)

Comparing performance of: produce vs structuredClone vs JSON back and forth

Created: 9 months ago by: Registered User

Jump to the latest result

produce

structuredClone

JSON back and forth

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):