深拷贝不同方案的性能对比

引子

问题起于一次CodeReview，说序列化性能不好，建议采用lodash或者自己实现一个cloneDeep，性能会更好。本着实事求是的原则，对比了下深拷贝，所以诞生了这篇文章。

方案对比

性能测试

jsBench

jsPerf在线已不能使用，jsBench对比的是每秒执行次数，不直观不精确：

console.time

console.time和console.timeEnd可以打印出中间代码执行时间，jsBench里的对比数据在同一个量级，在console.time里就能差出10倍，比jsBench直观：

• 空对象性能对比

• 展开1千多行接口返回的json数据实测

• vue对象拷贝

结论

1. 浅层拷贝的对象：Object.assign
2. 稍复杂的接口返回对象：JSON.parse(JSON.stringify)
3. 较复杂的本地对象：Proxy+Map
4. 对象遍历、递归能不用尽量不用：性能差，还有爆栈风险

参考

• Proxy：github.com/KieSun/Drea…
• Proxy方案解析：

1. www.ayqy.net/blog/immer/
2. blog.csdn.net/weixin\_395…
3. segmentfault.com/a/119000002…
4. www.zhihu.com/tardis/sogo…

• deepClone方案：blog.csdn.net/qq\_4184686…
• jsBench：jsbench.me/