Benchmark: Immer & Immutable benchmarks with inceremntal data

HTML Preparation code:

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

AخA
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/immer/9.0.17/immer.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.2.2/immutable.min.js"></script>

Script Preparation code:

var INITIAL_DATA = { items: {}, count: 0, keys: [] }
var produce = immer.default

var iterationTop = 30;
var iterationBottom = 70;
var iterationFull = iterationTop * iterationBottom;

​x
 
var INITIAL_DATA = { items: {}, count: 0, keys: [] }var produce = immer.default​var iterationTop = 30;var iterationBottom = 70;var iterationFull = iterationTop * iterationBottom;

Tests:

immer many shorts updates

let data = INITIAL_DATA;

for (i = 0; i < iterationFull; i++) {
  data = produce(data, draft => {
    draft.items[i] = { id: i, name: `NEW-ITEM${i}`, value: i }
    draft.counter++
    draft.keys.push(`NEW-ITEM${i}`)
  })
}

 
let data = INITIAL_DATA;​for (i = 0; i < iterationFull; i++) {  data = produce(data, draft => {    draft.items[i] = { id: i, name: `NEW-ITEM${i}`, value: i }    draft.counter++    draft.keys.push(`NEW-ITEM${i}`)  })}

immer one big update

let data = INITIAL_DATA;

data = produce(data, draft => {
  for (i = 0; i < iterationFull; i++) {
    draft.items[i] = { id: i, name: `NEW-ITEM${i}`, value: i }
    draft.counter++
    draft.keys.push(`NEW-ITEM${i}`)
  }
})

 
let data = INITIAL_DATA;​data = produce(data, draft => {  for (i = 0; i < iterationFull; i++) {    draft.items[i] = { id: i, name: `NEW-ITEM${i}`, value: i }    draft.counter++    draft.keys.push(`NEW-ITEM${i}`)  }})

immer balanced data change

let data = INITIAL_DATA;

for (i = 0; i < iterationTop; i++) {
  data = produce(data, draft => {
    for (x = 0; x < iterationBottom; x++) {
      const id = `${i}-${x}`
      draft.items[id] = { id: id, name: `NEW-ITEM${id}`, value: id }
      draft.count++
      draft.keys.push(`NEW-ITEM${id}`)
    }
  })
}

 
let data = INITIAL_DATA;​for (i = 0; i < iterationTop; i++) {  data = produce(data, draft => {    for (x = 0; x < iterationBottom; x++) {      const id = `${i}-${x}`      draft.items[id] = { id: id, name: `NEW-ITEM${id}`, value: id }      draft.count++      draft.keys.push(`NEW-ITEM${id}`)    }  })}

immutable

let immData = Immutable.Record({
  items: Immutable.Map({}),
  count: 0,
  keys: Immutable.List([])
})();

for (i = 0; i < iterationFull; i++) {
  immData = immData.update("items", (items) => {
    return items.set(
      i, 
      Immutable.Record({
        id: i, 
        name: `NEW-ITEM${i}`, 
        value: i 
      })()
    );
  });
  immData = immData.set("count", immData.get("count") + 1);
  immData = immData.update("keys", (keys) => keys.push(`NEW-ITEM${i}`));
}

 
let immData = Immutable.Record({  items: Immutable.Map({}),  count: 0,  keys: Immutable.List([])})();​for (i = 0; i < iterationFull; i++) {  immData = immData.update("items", (items) => {    return items.set(      i,       Immutable.Record({        id: i,         name: `NEW-ITEM${i}`,         value: i       })()    );  });  immData = immData.set("count", immData.get("count") + 1);  immData = immData.update("keys", (keys) => keys.push(`NEW-ITEM${i}`));}​

immutable balanced data change

let immData = Immutable.Record({
  items: Immutable.Map({}),
  count: 0,
  keys: Immutable.List([])
})();

for (i = 0; i < iterationTop; i++) {
  immData = immData.update("items", (items) => {
    let immItems = items;

    for (x = 0; x < iterationBottom; x++) {
      const id = `${i}-${x}`;
      immItems = immItems.set(
        id, 
        Immutable.Record({
          id: id, 
          name: `NEW-ITEM${id}`, 
          value: id 
        })()
      );

      return immItems;
    }
  });
}

for (i = 0; i < iterationFull; i++) {
  immData = immData.set("count", immData.get("count") + 1);
  immData = immData.update("keys", (keys) => keys.push(`NEW-ITEM${i}`));
}

 
let immData = Immutable.Record({  items: Immutable.Map({}),  count: 0,  keys: Immutable.List([])})();​for (i = 0; i < iterationTop; i++) {  immData = immData.update("items", (items) => {    let immItems = items;​    for (x = 0; x < iterationBottom; x++) {      const id = `${i}-${x}`;      immItems = immItems.set(        id,         Immutable.Record({          id: id,           name: `NEW-ITEM${id}`,           value: id         })()      );​      return immItems;    }  });}​for (i = 0; i < iterationFull; i++) {  immData = immData.set("count", immData.get("count") + 1);  immData = immData.update("keys", (keys) => keys.push(`NEW-ITEM${i}`));}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
immer many shorts updates
immer one big update
immer balanced data change
immutable
immutable balanced data change

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
immer many shorts updates	1.1 Ops/sec
immer one big update	256.3 Ops/sec
immer balanced data change	26.8 Ops/sec
immutable	96.4 Ops/sec
immutable balanced data change	722.4 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 6 months ago):

The benchmark results show the performance of different JavaScript code snippets for updating immutable data structures. Let's break down what we see:

Key Observations:

Immutable Libraries: The tests compare various approaches to updating immutable data, including Immer and raw Immutable.js operations.
Benchmark Metrics: "ExecutionsPerSecond" indicates how many times each code snippet successfully completes its update operation within a second. Higher values mean faster performance.
Performance Variations: There's significant variation in performance across different scenarios:
- immutable balanced data change: Achieves the highest execution rate (722.38), suggesting efficient updates for well-structured immutable data.
- immer one big update: Significantly slower than immutable balanced data change (256.26) despite using Immer, which aims to optimize these operations. This might indicate limitations of Immer when dealing with large updates.
Other Scenarios: The remaining tests (immutable, immer balanced data change, and immer many shorts updates) have lower execution rates, highlighting the importance of code structure and update patterns for performance.

Possible Explanations:

Code Complexity: Simpler structures and operations (like immutable balanced data change) likely execute faster due to fewer nested operations and less overhead.
Library Implementations: There might be underlying differences in how Immer and Immutable.js handle updates, leading to variations in efficiency depending on the scenario.
Data Size: The immer one big update scenario involves a larger update, potentially causing performance bottlenecks regardless of the library used.

Recommendations:

Analyze Code Structure: Carefully examine your data structures and update patterns. Aim for simpler structures and operations whenever possible.
Benchmark Different Libraries/Techniques: Don't rely solely on benchmarks; consider other factors like ease of use, developer experience, and support for specific use cases.

Let me know if you have more questions or want to explore a particular aspect of the benchmark results in more detail!

LLMs can make mistakes. Check important info.

The benchmark results show the performance of different JavaScript code snippets for updating immutable data structures.  Let's break down what we see:

**Key Observations:**

* **Immutable Libraries:** The tests compare various approaches to updating immutable data, including Immer and raw Immutable.js operations. 
* **Benchmark Metrics:** "ExecutionsPerSecond" indicates how many times each code snippet successfully completes its update operation within a second. Higher values mean faster performance.
* **Performance Variations:** There's significant variation in performance across different scenarios:
    *  **`immutable balanced data change`**: Achieves the highest execution rate (722.38), suggesting efficient updates for well-structured immutable data.
    *  **`immer one big update`**:  Significantly slower than `immutable balanced data change` (256.26) despite using Immer, which aims to optimize these operations. This might indicate limitations of Immer when dealing with large updates.

* **Other Scenarios:** The remaining tests (`immutable`, `immer balanced data change`, and `immer many shorts updates`) have lower execution rates, highlighting the importance of code structure and update patterns for performance.

**Possible Explanations:**

1. **Code Complexity:**  Simpler structures and operations (like `immutable balanced data change`) likely execute faster due to fewer nested operations and less overhead.
2. **Library Implementations:** There might be underlying differences in how Immer and Immutable.js handle updates, leading to variations in efficiency depending on the scenario.

3. **Data Size:**  The `immer one big update` scenario involves a larger update, potentially causing performance bottlenecks regardless of the library used.

**Recommendations:**

*  **Analyze Code Structure:** Carefully examine your data structures and update patterns. Aim for simpler structures and operations whenever possible.
* **Benchmark Different Libraries/Techniques:** Don't rely solely on benchmarks; consider other factors like ease of use, developer experience, and support for specific use cases.

Let me know if you have more questions or want to explore a particular aspect of the benchmark results in more detail!

Related benchmarks:

Immer & Immutable benchmarks with inceremntal data (version: 0)

Comparing performance of: immer many shorts updates vs immer one big update vs immer balanced data change vs immutable vs immutable balanced data change

Created: 2 years ago by: Registered User

Jump to the latest result