我用了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:评论中有一个更好的解决方法。
留下一定数量,之前的的清除;
分成多个框呢,可能是一个框占用的太多造成的吧.