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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash simple merge	71196.5 Ops/sec
Lodash smart merge	106895.8 Ops/sec
seamless-immutable merge	34408.2 Ops/sec
Spread merge	3742591.0 Ops/sec

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: 5 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