![cover](https://img-blog.csdnimg.cn/img_convert/3cb203bf5a910df9c7445f559df01780.png)
一张图解决vue中websocket推送数过多导致页面卡主(思路)
websocket推送卡主、崩溃、卡死
·
首先,websocket连接就不过多赘述了,主要讲述连接以后出现的问题,这个问题点就在于渲染,websocket推送在数据量过大时不能一条一条渲染,这样会导致浏览器压力过大而崩溃(卡死),所以主要思路就是将数据缓存在一个数组中,通过定时器定时渲染数据。
![](https://i-blog.csdnimg.cn/blog_migrate/febf08a6ca0f2ae79661018369b0101c.png)
下面是逻辑代码
// data中的数据
data() {
return {
time1:3000,
joblistsCache:[], //websocket缓存
joblists: [], //渲染的表格数据
}
},
// mounted逻辑
mounted() {
//加载创建一个2秒定时器(time1:2000ms)
this.time1 = setInterval(() => {
console.log('++++++','websocket需要装进去的长度',this.joblistsCache.length);
// 如果websocket需要装进去的长度大于200,那就截取最新的200条以外的所有数据(1、每次只渲染200条 2、joblistsCache数组为缓存数组,并不是实时渲染到的数据)
if (this.joblistsCache.length > 200) {
console.log('+++---','添加时删除' + String(this.joblistsCache.length - 200) + '条');
this.joblists.unshift(...this.joblistsCache.splice(this.joblistsCache.length - (this.joblistsCache.length - 200), (this.joblistsCache.length - 200)))
}else{
this.joblists.unshift(...this.joblistsCache)
}
// 如果当前页面上的table表格数据超过200条,渲染将可能会卡顿,为了优化,让页面只有200条数据去渲染
if (this.joblists.length > 200) {
this.joblists.splice(this.joblists.length - (this.joblists.length - 200), (this.joblists.length - 200))
}
console.log('+++===','当前列表长度',this.joblists.length);
// 每次轮询置空joblistsCache缓存数组,为了取到除了上次获取到数据意外的 最新数据
this.joblistsCache = []
}, this.time1)
},
// methods逻辑
methods:{
//接收后端返回的数据,可以根据需要进行处理
websocketonmessage(e) {
if (JSON.parse(e.data).appName !== 'system') {
// websocket连接后先将所有数据放到缓存中
this.joblistsCache.unshift(JSON.parse(e.data))
} else {
return
}
},
}
//最后不要忘记在beforeDestroy删除定时器哦(很重要)~
beforeDestroy() {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.time1);
})
},
其实在借鉴各位的解决方法时,有一种思路我目前还没有尝试:如果用户就是需求一条一条推送的效果,可以尝试一下不用elementui中的table组件,自己去写一个原生table并拿到websocket推送的数据进行渲染(据说是有这么个办法是可行的哈)。
另外会有人问,那你删除的数据怎么显示呢?我的思路是:
1、做一个后端搜索的接口去查找你想要的那条数据。
2、添加table的 infiniteScroll无限滚动功能(参照大神链接https://yehaocheng520.blog.csdn.net/article/details/120038098)
最后欢迎各位大佬批评指正~
更多推荐
所有评论(0)