数据量过大导致页面卡死

最近在做编辑器项目，有个输出功能，需要不断的接收websocket推过来的消息，一段时间后（10s）前端界面就会卡死，cpu也会飙升。开始以为是推送过快导致，排查后发现数据量太大，前端一次性需要渲染的数据太多了，超过4000条就会开始卡。选择参考vscode的处理方式：滚动输出，不显示全部的输出，以新输出代替旧输出。

数据类似于下面这样，带有回车换行符：

[root@demo scc_demo]#↵
1\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
2\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
3\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
4\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
5\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
6\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵;

实现方式如下：
大于2000行的时候，舍弃最远的那条数据，塞入最新的数据。因为res.data是批量数据，可能有一两千行，所以进行如下处理：

//如果已经是回车换行符了，就塞入空字符串（避免塞入很多空行的话可以在判断下）
 if (res.data === "\r\n") {
     contentArr.push("");
  } else {
     // 按照回车换行符分割成数组，舍弃最后一个空字符串，会有很多空行
     let concatArray = res.data.split(/[\r\n]+/);
     if (concatArray[concatArray.length - 1] === "") {
           concatArray.splice(concatArray.length - 1, 1);
     }
     contentArr = contentArr.concat(concatArray);
  }
  //大于2000条就只保留2000条以后的
  if (contentArr.length > 2000) {
      contentArr.splice(0, contentArr.length - 2000);
  }
  //加入回车换行符
  this.tabList[0].content = contentArr.join("\r\n");

最终展现结果如下：

result

页面卡死问题顺利解决。

附:

页面回车换行问题参考前端页面回车换行展示,本文妥妥选择第二种。