Benchmark: Deep merge - MeasureThat.net

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/seamless-immutable/7.1.3/seamless-immutable.production.min.js'></script>

Script Preparation code:

var state = {
    flag: false,
    text: 'Default state',
    nested1: {
      flag: false,
      value: 1,
      text: 'Nested1',
      deep1: {
        flag: false,
        value: 1,
        text: 'Deep1',
      },
      deep2: {
        flag: false,
        value: 1,
        text: 'Deep2',
        deeper: {
          text: 'Very deep',
          value: 1
        }
      },
    },
    nested2: {
      flag: false,
      value: 2,
      text: 'Nested2',
	  deep1: {
        flag: false,
        value: 1,
        text: 'Deep1',
      },
      deep2: {
        flag: false,
        value: 1,
        text: 'Deep2',
        deeper: {
          text: 'Very deep',
          value: 1
        }
      },      
    },
  	nested3: {
      flag: false,
      value: 3,
      text: 'Nested3',
	  deep1: {
        flag: false,
        value: 1,
        text: 'Deep1',
      },
      deep2: {
        flag: false,
        value: 1,
        text: 'Deep2',
        deeper: {
          text: 'Very deep',
          value: 1,
          flag: false
        }
      },
    },
};

var patch = {
  flag: true,
  nested1: {
    flag: true
  },
  nested2: {
    deep1: {
      flag: true
    }
  },
  nested3: {
    deep2: {
      deeper: {
        flag: true
      }
    }
  }
}

function reassign(obj, src) {
    return _.isObjectLike(obj) ? _.assignWith(_.clone(obj), src, reassign) : _.cloneDeep(src);
}

var immutableState = Immutable(state);

function spreadMerge(state, patch) {
  return {
    ...state,
    flag: true,
    nested1: {
      ...state.nested1,
      flag: true
    },
    nested2: {
      ...state.nested2,
      deep1: {
        ...state.nested2.deep1,
        flag: true
      }
    },
    nested3: {
      ...state.nested3,
      deep2: {
        ...state.nested3.deep2,
        deeper: {
          ...state.nested3.deep2.deeper,
          flag: true
        }
      }
    }

  }
}

Tests:

Lodash simple merge
_.merge({}, state, patch)
Lodash smart merge
reassign(state, patch)
seamless-immutable merge
Immutable.merge(immutableState, patch, {deep: true})
Spread merge
spreadMerge(state, patch)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash simple merge
Lodash smart merge
seamless-immutable merge
Spread merge

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash simple merge	134440.3 Ops/sec
Lodash smart merge	355372.1 Ops/sec
seamless-immutable merge	66759.2 Ops/sec
Spread merge	3770451.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Overview**

The testbench measures the performance of three different approaches to merge two objects: `lodash` (with `merge` and `assignWith` functions), `seamless-immutable` (using `Immutable.merge` function), and a custom implementation called "Spread merge".

**What are we testing?**

We're comparing the execution time of each approach when merging two objects. Specifically, we have:

1. Two source objects: `state` and `patch`.
2. A target object that will receive the merged result.

The goal is to determine which approach performs better in terms of speed.

**Options Compared**

Here are the options being compared:

1. **Lodash simple merge**: Using `_.merge({}, state, patch)` to merge the objects.
	* Pros: Simple and easy to understand. Lodash is a well-known and widely used library.
	* Cons: May have performance overhead due to its complexity.
2. **Lodash smart merge**: Using `reassign(state, patch)`, which is a more optimized version of the `merge` function provided by Lodash.
	* Pros: Optimized for performance, using `_.cloneDeep` and `_.assignWith` functions to reduce unnecessary work.
	* Cons: May be harder to understand due to its internal workings.
3. **Seamless-immutable merge**: Using `Immutable.merge(immutableState, patch, {deep: true})`.
	* Pros: Optimized for immutability, which can lead to better performance and scalability in certain scenarios.
	* Cons: Requires using the Seamless Immutable library, which may have a higher overhead due to its additional dependencies.

**Custom Implementation (Spread merge)**

The custom implementation uses a spread operator (`...`) to merge the objects:
```javascript
function spreadMerge(state, patch) {
  return {...state, ...patch};
}
```
This approach is simpler and easier to understand but may not be as efficient as the other two options.

**Benchmark Results**

The latest benchmark results show that:

1. **Spread merge**: Performs relatively well with an execution time of approximately 67152.15625 executions per second.
2. **Seamless-immutable merge**: Has a slightly lower performance with around 138308.546875 executions per second.
3. **Lodash smart merge**: Outperforms both previous options, with around 206024.6875 executions per second.
4. **Lodash simple merge**: Has the lowest performance among all four options.

Based on these results, it appears that the Lodash smart merge approach performs best in terms of speed, followed closely by the Seamless Immutable merge approach.

Related benchmarks:

Deep merge (version: 0)

Spread vs lodash vs seamless-immutable

Comparing performance of: Lodash simple merge vs Lodash smart merge vs seamless-immutable merge vs Spread merge

Created: 6 years ago by: Guest

Jump to the latest result

Lodash simple merge

Lodash smart merge

seamless-immutable merge

Spread merge

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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