当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 23:10:07 vue.js

最近遇到需要在地图上显示某区域的路网线,后台直接返回了30000多个数据点,每条线有将近100个坐标点这是取整到300w个数据。而且不能分层显示,只能一次性全部显示,没办法,硬着头皮放到地图上。开发完成后,打开网页,拖动地图,偶尔会出现卡顿,但是,上线,3天后就可以用了。产品经理:哎,这个数据怎么能不变呢?可以添加轮询定时请求,还有,地图能不能有动态效果,一段时间后随机定位到某个地方,然后点击地图点击有详细数据的弹窗打工:...添加轮询,打开网页,拖动地图,会出现明显的掉帧和卡顿现象,不过上网吧,能用一天。产品经理:页面没怎么操作,走了就崩了。Worker:...打开控制台,打开任务管理浏览器发现第一次页面加载内存占用接近1G,第一次轮询占用1.4G,第二次轮询占用1.8G,内存占用增加了每个轮询400M。1T内存不够用(另外,一个tab占用4G左右内存,页面就崩溃了,这是错误的,我明明把地图对象去掉,重新设置了数据,为什么内存一直在增加?于是开始修复bug,经过反复调试定位,发现是vue数据深度监控和map对象的引用关系导致内存无法释放(疑惑),那么这个问题就好解决了,岂不是关闭vue深度监控比较好?因为本项目请求的数据只是展示,不会修改,所以只需要在赋值前冻结数据即可this.list=Object.freeze(list)由于数据冻结,vue无法深度遍历Data给数据添加get和set属性,减少数据监控带来的问题,Object.freeze()在数据量大的情况下非常有用。Object.freeze()方法可以冻结一个对象,一个冻结的对象不能再长er被修改。当然,你可以替换变量的引用。您不能添加新属性。您不能删除现有属性。您不能修改现有属性的可枚举性、可配置性和可写性。您不能修改现有属性的值。原型无法修改