JQuery setInterval with append，增加内存答案

【问题标题】：JQuery setInterval with append, increase memoryJQuery setInterval with append，增加内存
【发布时间】：2014-06-13 17:41:48
【问题描述】：

对不起，我的英语不好。

我用 jQuery 创建了一个聊天系统，当我尝试替换内容（如用户在线-离线或收到的消息）时，它运行良好，但开始变得越来越慢，导致 javascript 开始占用越来越多的记忆。

$(document).ready(function(e) {
data = '<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>';

$("body").empty().append(data);

setInterval(function(){
    $("body").empty().append(data);
    }, 1000);

}); //document

在谷歌浏览器中测试（我不能在这里发布图片，因为我是新人）。越来越多地出现在时间轴内存中，并且节点（绿线）一直像楼梯一样折叠。

我已经测试过：

document.getElementById("selector_inthiscasetheidofthebody").innerHTML="";

然后

document.getElementById("selector_inthiscasetheidofthebody").innerHTML=data;

我使用了 setTimeout 方法 insted of setInterval
我试过html()jQuery方法

这是图片：

还有其他想法吗？谢谢。

【问题讨论】：

您似乎对自己的情况没有足够的了解。看这个，有一些问题，但没有像你描述的那样。我试过了，正如你所描述的，它似乎并没有随着时间的推移而减慢。我认为您需要发布更多代码（如果有更多）。
这并没有减速，因为例子很简单，但是如果你看到Chrome的时间线(F12, Timeline, Click on Record[Red Button])内存有问题。如果你在应用程序中使用它，你会发现它越来越慢
我认为如果你的代码真的那么简单，那么优化还为时过早，而且我不认为你发布的 sn-p 说明了你的性能问题。考虑发布更多代码或推迟优化问题，直到它们成为用户体验问题。代码在 chrome 中使用更多内存这一事实并不重要，除非它给您的用户带来问题。
在所有浏览器中造成内存，您可以使用 Chrome 的 Timeline 对其进行缓存。这是导致问题的所有代码。 dl.dropboxusercontent.com/u/76885657/stackoverflow/…这是 Chrome 的结果
那么，直接设置innerHTML也有同样的问题吗？

标签： jquery html memory memory-leaks append

【解决方案1】：

我找到了！您无法避免增加内存和节点，但您可以控制它们！这是代码：

    $(document).ready(function(e) {

// Possible data    
data = '<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>';

// Clean all that browsers changes, like putting styles inline, etc. Data and html appened, must be the same
function clean(a){
    if((a != 'undefined') && (a != null)){
    a = a.replace(/(\ style=".*?")/gi,'').replace(/(<tbody>)/gi,'').replace(/(<\/tbody>)/gi,'').replace(/(\&amp\;)/gi,'&').replace(/(\&lt\;)/gi,'<').replace(/(\&gt\;)/gi,'>').replace(/(\")/gi,"'");
    return a.trim();
    }
    };

// If they are different, then append data. So, you only append data in case information changes.
function inyectar(a,b){
    if(clean($(a).html()) != clean(b)){
        $(a).empty().append(b);
        }
    }

setInterval(function(){
    inyectar("body",data);
        }, 1000);
});

【讨论】：