javascript - 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：评论中有一个更好的解决方法。

这篇关于javascript - textarea中不断写入数据，然后浏览器非常卡，求解决方案。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！