太多的字符串在同一時間進行拼接使得前端長時間阻塞，如何優化？

我使用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

太多的字符串在同一時間進行拼接使得前端長時間阻塞，如何優化？

回答

相關問題