ol_m_lo 2021-07-29 11:40 采纳率: 60%
浏览 113
已结题

socket消息渲染页面卡死-前端vue框架

我不是专业前端,能给出具体代码的建议吗?先谢过了!
现在的场景是:web端-vue-前端需要实时的展示刷新一个结果数据,这个数据普遍在2000条左右。后端使用socket在实时的推送,因为需要消息的实时性,所以后端会一直推,速度大概是七八百条/秒。前端需要用什么方法有效的渲染这个数据,或者后端需要怎么的改进。(这里有一个实际的问题:数据需要实时性,后端这边一直获取最新信息然后推送给前端。)

前端局部展示代码:

// 渲染部分
<div v-for="item in listinfo">
<el-tag effect="plain" type="info" style="display: block;border: none;font-size: 14px" >
{{item}}
</el-tag>
</div>
<div v-for="item in listinfo1">
<el-tag effect="plain" type="info" style="display: block;border: none;font-size: 14px" >
{{item}}
</el-tag>
</div>


//参数部分
export default {
name: "case",
components: {},
data() {
listinfo: [],
listinfo1: [],
}
}


// socket部分
connectsocket(){
let url = 'ws://.....';
this.ws = new websocket(url)
this.ws.onmessage = function(e){
var text = JSON.parse(e.data)
if (typeof text.message==="string"){
if(text.message==="start"){
that.getList()
that.getTreeselect()
that.exeAbel = true
that.readOnly = true
}else if(text.message==='end'){
that.result()
that.getList()
that.getTreeselect()
that.exeAbel = false
that.readOnly = false
}else if(text.msg_type==='run'){
that.infolist.push(text.message)
}else if(text.msg_type==='run1'){
that.infolist1.push(text.message)
}
}else if(typeof text.message==="object"){
//这个消息数量很少,就不写了
}
}
}
  • 写回答

3条回答 默认 最新

  • 咕泡-三木 2021-07-29 15:01
    关注

    关键词:缓冲

    思路:

    1. 后端来的数据实时放计入数组A
    2. 每隔1~2秒,从数组A中取出前10条数据渲染到页面上

    这样,无论后端的频率有多高,数据量有大, 页面的渲染速度都是稳定可控的

    如有帮助还请及时采纳,追问可关注公众号:测试开发研习社

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 9月3日
  • 已采纳回答 8月26日
  • 修改了问题 8月3日
  • 创建了问题 7月29日

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能