这是我在工作中碰到的问题,并从中吸取经验,望后来者不要跟我犯同样的问题,
背景:
订单列表页需要做一个定时刷新,来展示最新数据,开始我的想法时定时刷新嘛,那就setinterval就能解决问题,确实这个就能解决问题,但是需要有很多细节问题需要注意.
- 先说问题,在页面完成之后测试发现,在开启自动刷新的时候有时会出现重复的数据,但是关闭自动刷新就没有问题.这个问题在开发环境一直无法复现,所以我们改起来特别困难,
- 数据重复出现我们首先想到的是在自动刷新的时候对旧数据没有及时清理,所以我就在每次调用接口返回时先将数组置空并用nexttick等待渲染之后再去赋值新的数据,但是这样并没有解决问题,
- 然后考虑是不是引用类型的原因,我们将返回值深拷贝之后再赋值,发现还是没用,
- 最后是我在远程的时候看到他们定时器的调用时间明显小于我们规定的10秒,所以我猜测是不是定时器出问题,然后我梳理代码发现定时器的方法在另外一个常用搜索里面有被调用,所以导致页面上出现了多个定时器,从而导致数据一直被重复赋值,有几个定时器就会赋值几次.
- 解决办法:添加一个判断,定时器有值的时候不再重复,是不是很简单,但是因为在开发环境无法复现,所以排查起来特别困难,同时告诉我们,同事写的代码要好好看.
const setRefreshTime = () => {
if(!timer.value)
{
timer.value = setInterval(() => {
searchHandle()
console.log('timer.value',timer.value)
}, 10000)
}
}
你以为这样就完了嘛?少年太天真了.在这个问题解决之后又有一个新问题,就是打开自动刷新之后,内存占用很快就满了,然后网页就开始卡顿,甚至卡死,这个地方就涉及到我说的内存优化了
- 首先在没有加自动刷新功能之前我们的页面渲染频率不高,只有在操作时才会渲染,现在是间隔一段时间就会渲染,所以我们的问题方向可以确定为减少渲染
- v-if更改为v-show,将页面中很多元素渲染判断改为v-show可以有效节省频繁渲染的成本
- 在数据没有变更时,不去强制渲染,在获取值的时候去做一个判断
- 使用key:在渲染数据变动较小时,通过vue自己的diff算法优化只渲染变动的部分,比如10条数据中只有一条或者几条新数据的情况,
