数据量过大导致页面卡死

最近在做编辑器项目，有个输出功能，需要不断的接收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

页面卡死问题顺利处理。

附:

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