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)

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Spread merge

6.4M/s

Lodash smart merge

224K/s

Lodash simple merge

134K/s

seamless-immutable merge

54K/s

Fastest: Spread merge (118.9x faster)

View exact numbers

✓ Spread merge: 6,429,364 ops/sec
• Lodash smart merge: 223,687 ops/sec
• Lodash simple merge: 134,440 ops/sec
• seamless-immutable merge: 54,076 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 year ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Spread merge

13.5M/s

Lodash smart merge

424K/s

Lodash simple merge

170K/s

seamless-immutable merge

77K/s

View exact numbers

Test name	Executions per second
✓ Spread merge	13,486,893 Ops/sec
Lodash smart merge	424,420 Ops/sec
Lodash simple merge	169,805 Ops/sec
seamless-immutable merge	76,506 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

Deep merge (version: 0) Benchmark.js

Spread vs lodash vs seamless-immutable

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

Created: 8 years ago by: Guest

Go to the latest result

Lodash simple merge

Lodash smart merge

seamless-immutable merge

Spread merge

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Deep merge (version: 0) Benchmark.js

Spread vs lodash vs seamless-immutable

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

Created: 8 years ago by: Guest

Go to the latest result

Lodash simple merge

Lodash smart merge

seamless-immutable merge

Spread merge

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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