Benchmark: immer produce vs immer freeze vs immutable copy vs deep freeze vs baseline copy / freeze

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immer/8.0.1/immer.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>

Script Preparation code:

// var { compose, over, set, lensPath, append } = R

var INITIAL_DATA = { items: {}, count: 0, keys: [] }

for (var index = 0; index < 100; index++) {
  INITIAL_DATA[index] = { id: index, name: `ITEM-${index}`, value: Math.random() }
  INITIAL_DATA.count++
  INITIAL_DATA.keys.push(index)
}

var mutable = INITIAL_DATA

var NEW_ITEM_ID = INITIAL_DATA.count +1

function deepFreeze (o) {
  Object.freeze(o);

  Object.getOwnPropertyNames(o).forEach(function (prop) {
    if (o.hasOwnProperty(prop)
    && o[prop] !== null
    && (typeof o[prop] === "object" || typeof o[prop] === "function")
    && !Object.isFrozen(o[prop])) {
      deepFreeze(o[prop]);
    }
  });
  
  return o;
};

Tests:

immer produce
data = immer.produce(INITIAL_DATA, draft => {})
immer freeze
data = immer.freeze(INITIAL_DATA, draft => {})
immutable copy
data = Immutable.fromJS(INITIAL_DATA)
deep freeze
data = deepFreeze(INITIAL_DATA)
baseline copy / freeze
data = Object.freeze({ items: Object.freeze({ ...INITIAL_DATA.items }), count: INITIAL_DATA.count, keys: Object.freeze([ ...INITIAL_DATA.keys ]) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer produce
immer freeze
immutable copy
deep freeze
baseline copy / freeze

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immer produce	6269419.5 Ops/sec
immer freeze	16336247.0 Ops/sec
immutable copy	45754.4 Ops/sec
deep freeze	304414.0 Ops/sec
baseline copy / freeze	7753979.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on the provided JSON.

**Benchmark Overview**

The benchmark is designed to compare different approaches for freezing or copying an object in JavaScript. The test data consists of a large object `INITIAL_DATA` with 100 properties, each containing an `id`, `name`, and `value`. The benchmark compares five different methods:

1. `immer.produce`
2. `immer.freeze`
3. `Immutable.fromJS`
4. `deepFreeze`
5. A baseline approach using `Object.freeze`

**Options Compared**

Here's a brief description of each option:

* **`immer.produce`**: Produces a new immutable object by applying the provided function to the original data.
* **`immer.freeze`**: Freezes the original object in place, making it immutable.
* **`Immutable.fromJS`**: Creates an immutable JavaScript object from a JSON-like object (in this case, `INITIAL_DATA`).
* **`deepFreeze`**: A recursive function that freezes all nested properties of an object.
* **Baseline copy / freeze**: Uses `Object.freeze` to freeze the entire object, including its properties.

**Pros and Cons**

Here's a brief summary of each approach:

* **`immer.produce`**:
	+ Pros: Creates a new immutable object, efficient for large data sets.
	+ Cons: Can be slower than other approaches due to the overhead of creating a new object.
* **`immer.freeze`**:
	+ Pros: Efficiently freezes the original object in place.
	+ Cons: Does not create a new object; modifying the frozen object can lead to unexpected behavior.
* **`Immutable.fromJS`**:
	+ Pros: Creates an immutable object from a JSON-like object, easy to use.
	+ Cons: Can be slower than `immer.freeze` due to the overhead of creating a new object.
* **`deepFreeze`**:
	+ Pros: Recursively freezes all nested properties of an object.
	+ Cons: Can lead to unexpected behavior if not used carefully, as it modifies the original object.
* **Baseline copy / freeze**:
	+ Pros: Creates a new immutable object by freezing its properties.
	+ Cons: Can be slower than other approaches due to the overhead of creating a new object.

**Other Considerations**

When choosing an approach, consider the following factors:

* Performance: If speed is critical, `immer.freeze` or `Immutable.fromJS` might be a good choice.
* Mutability: If you need to modify the frozen object, `immer.produce` or baseline copy / freeze might be more suitable.
* Complexity: If you're dealing with nested objects, `deepFreeze` can be a convenient option.

**Library and Purpose**

In this benchmark, two libraries are used:

1. **Immer**: A library for working with immutable data structures in JavaScript. Its main purpose is to provide an efficient way to create new immutable objects from existing ones.
2. **Immutable**: Another library that provides immutable data structures for JavaScript. Its main purpose is to build upon Immer's functionality and offer more advanced features.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax used in this benchmark. The focus is on comparing different approaches for freezing or copying objects, which are fundamental concepts in JavaScript.

Related benchmarks:

immer produce vs immer freeze vs immutable copy vs deep freeze vs baseline copy / freeze (version: 1)

Comparing performance of: immer produce vs immer freeze vs immutable copy vs deep freeze vs baseline copy / freeze

Created: 3 years ago by: Registered User

Jump to the latest result

immer produce

immer freeze

immutable copy

deep freeze

baseline copy / freeze

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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