前端性能优化-番外篇-Object.freeze到底用在哪

最新推荐文章于 2025-07-01 11:29:29 发布

Beam007

最新推荐文章于 2025-07-01 11:29:29 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： performance

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/93193299

本文探讨了如何在前端性能优化中使用`Object.freeze`。通过分析三种不同的冻结方式，指出冻结一由于对象赋值操作导致冻结无效，冻结二虽减少对象体积但增加额外函数，而冻结三能确保对象不可修改。对于纯展示的大数据，应选择正确的冻结策略以防止不必要的监听和变更。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于前端纯大数据展示，不需要做修改其中字段等处理的，使用Object.freeze方法来包裹变量，vue内部不再去监听数据的变化提高性能。
话是这么说，官方资料这么写：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
但是，问题又来了，这个Object.freeze我应该用在哪个变量上呢？
现有代码段如下：

// res是axios请求的返回数据，basicInfoData是vue上挂的变量
this.basicInfoData = res.data.page.list
console.log(this.basicInfoData, 111)

冻结一：

Object.freeze(res)
this.basicInfoData = res.data.page.list
console.log(this.basicInfoData, 222)
this.basicInfoData.test = 99

打印出来的变量222和111一模一样，给basicInfoData添加变量成功。
冻结二：

this.basicInfoData = Object.freeze(res.data.page.list)
console.log(this.basicInfoData, 222)
this.basicInfoData.test = 99

打印出来的变量222和111明显不同，虽然freeze后少了__ob__，但是__proto__多了很多函数，给basicInfoData添加变量报错。

最低0.47元/天解锁文章

200万优质内容无限畅学