最近在做一个编辑器项目，有输出功能，需要不断接收websocket推送的消息。过了一段时间(10s)前端接口会卡顿，cpu飙升。 一开始我觉得是推得太快了。查了一下发现数据量太大，前台一次渲染的数据太多。如果超过4000块，卡就开始了。 参考vscode选择解决方案:滚动输出，不显示相同的输出，用新输出替换旧输出。 数据类似于以下，带回车换行符:[root @ demoscc _ demo] # 1 \ top指令为:jal PC = 0x 1008 cinst = 0x F5 ff 0 ef 2 \ top指令为:jal PC = 0x 1008 c inst = 0x ff 5 ff 0 ef ↵3\top指令为:jal PC = 0x ff 5 ff 0 ef ↵4\ top指令为:jal PC = 0x 1008 c inst = 0x ff 5 ff 0 ef ↵5\top指令为:jal PC = 0x 1008 c inst = 0x fff inst = 0x fff实现方法如下:当行数大于2000时，丢弃最远的数据，插入最新的数据。 由于res.data是批量数据，可能有一两千行，解决方法如下://如果已经是回车换行符，插入一个空字符串(可以判断是否避免插入很多空行)If(RES . data = = = " \ r \ n "){ contentar . push(" ")；} else {//按照回车换行符划分数组，丢弃最后一个空字符串，会有很多空行let concat array = RES . data . split(/[\ r \ n]+/)；if(concat array[concat array . length-1]= = = " "){ concat array . splice(concat array . length-1，1)；} content arr = content arr . concat(concat array)；}//如果数字大于2000，则只保留2000之后的If(content arr . length >:2000){ content arr . splice(0，content arr . length-2000)；}//添加回车换行符this.tablist [0]。content = content arr . join(" \ r \ n ")；最终结果如下:结果页面卡顿问题处理成功。 附:页回车换行符问题参考前面页回车换行符显示。本文恰当地选择了第二种。