javascript - 同时连接太多字符串导致前端长时间阻塞，如何优化？

Question

我使用 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);
        });

下面的代码将数据刷新到前端(使用 Angular 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;
    }

}

任何优化建议都非常好!

Answer 1

您可以做的是删除旧条目:

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/

现在将其修改为您想要的条目数。