100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 一行代码解决vue数据量大卡顿问题

一行代码解决vue数据量大卡顿问题

时间:2018-10-28 17:46:05

相关推荐

一行代码解决vue数据量大卡顿问题

最近遇到一个需求,需要在地图上显示某地区的路网线路,结果后端直接返回了3w多条数据

每条线路下坐标点接近100个

这四舍五入就是300w的数据啊。

而且还不能分层级显示,只能一次性显示全部打点,没办法,硬着头皮放到地图上吧。

开发完成,打开网页,拖动地图,偶尔出现了卡顿的情况,但是,上线吧,能用就行

3天后

产品经理:诶,这数据怎么不会变啊,你加个轮询定时请求吧,还有地图能不能有点动态效果,隔一段时间随机定位到某个地点吧,然后地图打点点击要有详细数据的弹窗

打工人:…

加上轮询,打开网页,拖动地图,出现了明显的掉帧和卡顿的情况,但是,上线吧,能用就行

一天后

产品经理:页面没怎么操作,怎么放着放着就崩了

打工人:…

打开控制台,打开任务管理器,发现初次加载页面内存就占用了接近1G

第一次轮询,内存占用1.4G

第二次轮询,内存占用1.8G

每次轮询,内存占用就增大了400M,好家伙,这样下去1T的内存都不够用啊(况且一个tab内存占用到4G左右页面就崩溃了

这…不对啊,我明明地图对象都移除了,数据也是重置了啊,内存怎么一直在增大呢?

于是开始了修bug之路

经过反复调试和定位,发现是vue数据深度监听和地图对象存在引用关系导致内存无法释放(怀疑)

那这个问题好解决啊,禁用vue深度监听不就好了吗

因为本项目中请求的数据只用于展示,不会对数据作修改,所以只需要在赋值data前把数据冻结即可

this.list = Object.freeze(list)

由于数据被冻结,所以vue无法深度遍历数据给数据添加get和set属性,这样就减少了数据监听带来的问题,而且在大数据量的情况下**Object.freeze()**非常有用

**Object.freeze()**方法可以冻结一个对象,一个被冻结的对象再也不能被修改,当然你可以将变量的引用替换掉

不能添加新属性不能删除已有属性不能修改已有属性的可枚举性、可配置性、可写性不能修改已有属性的值不能修改原型

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。