首页 > textarea中不断写入数据,然后浏览器非常卡,求解决方案。

textarea中不断写入数据,然后浏览器非常卡,求解决方案。

我用了websocke框架,不断接收服务端传过来的数据放在textarea中。数据量比较多的时候,感觉整个浏览器都有一定的卡顿,过一会又好了。大家分析下有啥好的办法呢?不甚感激。


这是因为webSocket频繁地接收信息而频繁地操作dom导致的,解决办法可以是设计一个信息队列。每当webSocket接收到信息的时候先放到信息队列中,然后按照一定的时间间隔来将信息队列中的队首信息放在textarea中。
实现参考如下:

var msgQueue = [],
    $textarea = $("textarea"),
    timestamp = 1000;

function checkMsg() {
    if (msgQueue.length > 0) {
        var msg = msgQueue.shift();
        var oldMsg =  $textarea.html();
        $textarea.html(oldMsg+msg);
    }
}


websock.onmessage = function(e) {
    msgQueue.push(e.data);
}

setInterval(checkMsg, timestamp);

另外,当信息太多的时候,也就是dom中的节点内容太多时,也会导致卡顿,这时候可以考虑将旧的数据从dom中转移到javascript的变量存储中。

PS:评论中有一个更好的解决方法。


留下一定数量,之前的的清除;


分成多个框呢,可能是一个框占用的太多造成的吧.

【热门文章】
【热门文章】