太多的字符串在同一时间进行拼接使得前端长时间阻塞，如何优化？

我使用websocket来侦听来自服务器的消息并在前端显示它。但有时候短时间内会有太多的信息传入，这会使浏览器长时间受阻。这里是我的代码：太多的字符串在同一时间进行拼接使得前端长时间阻塞，如何优化？

这是用于接收消息的websocket事件。下面

 $scope.logSocket.on('connect',function(){ 
     console.log("Log socket connected and ready to get log."); 
     $scope.logSocket.on('log',function(data){ 
      checkStartPhase(data, app); 
      appendLogText(data); 
     });

THT代码刷新数据（使用角JS）到前端：

var appendLogText = function(log) { 
    var t = $('#startConsoleContent'); 
    log += '\r\n'; 
    t.append('' + log); 
    t.scrollTop(t[0].scrollHeight - t.height()); 
}

，我必须使用函数checkAppPhase（）

var checkStartPhase = function(data, app) { 
    var regExp1 = 'Downloaded app package'; 
    var regExp2 = 'Uploading droplet'; 
    var regExp3 = 'Staging failed'; 
    var regExp4 = 'BUILD FAILURE'; 
    var regExp5 = 'Starting app instance'; 
    if( data.indexOf(regExp1) > -1) { 
     $scope.app_step =2; 
    } else if(data.indexOf(regExp2) > -1 || data.indexOf(regExp5) > -1) { 
      $scope.app_step =3; 
    } else if(data.indexOf(regExp3) > -1 || data.indexOf(regExp4) > -1) { 
     $scope.stage_failed = true; 
     $scope.app_step =2; 
    } 

}

检查日志的状态

任何建议，以优化它将是非常好的！

来源

2014-12-04 Ethan Wu

我看到了两件事。 1）你可以提前引用'$（'＃startConsoleContent'）;'提前，而不是每次调用函数，2）使用'=='而不是.indexOf可能在某种程度上更快，但是我无法证明这一点。 – tommybananas 2014-12-04 16:16:35

第一条建议很有帮助，我会尝试。对于第二个，我使用.index来查找'regExp'是否是'data'字符串的子字符串，'=='可能不起作用。 – 2014-12-06 02:56:47

它只是看起来像那些字符串提前知道，所以它似乎没有indexOf的理由，但如果字符串进来随机预先或什么，然后我明白了为什么你会使用它 – tommybananas 2014-12-06 03:02:53

你可以做的是删除旧的条目：

var appendLogText = function(log) {  
    var t = $('#startConsoleContent'); 
    while(t.children().length>=10) 
     t.find(':first').remove(); 
    t.append('<div>'+log+'</div>'); 
    t.scrollTop(t[0].scrollHeight - t.height()); 
}

方法的这一版本将只允许10的日志条目。

演示：http://jsfiddle.net/cu6hcjkk/

现在修改你想要的条目数。

来源

2014-12-04 19:45:43 vtortola

我试过了，问题得到解决，非常感谢：） – 2014-12-06 02:47:52

太多的字符串在同一时间进行拼接使得前端长时间阻塞，如何优化？

回答

相关问题