一张图解决vue中websocket推送数过多导致页面卡主（思路）-Toy模板网

这篇具有很好参考价值的文章主要介绍了一张图解决vue中websocket推送数过多导致页面卡主（思路）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先，websocket连接就不过多赘述了，主要讲述连接以后出现的问题，这个问题点就在于渲染，websocket推送在数据量过大时不能一条一条渲染，这样会导致浏览器压力过大而崩溃（卡死），所以主要思路就是将数据缓存在一个数组中，通过定时器定时渲染数据。

下面是逻辑代码

// 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）

最后欢迎各位大佬批评指正~文章来源地址https://www.toymoban.com/news/detail-514775.html

到了这里，关于一张图解决vue中websocket推送数过多导致页面卡主（思路）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！