JQuery setInterval加上append，增加内存

对不起，我的英语不好

我已经用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=data;

• 我使用了

  setTimeout

  方法代替了

  setInterval

• 我尝试了

  html（）

  jQuery方法

这是图像：

还有其他想法吗？谢谢。

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

    $(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);
});

$（文档）.ready（函数（e）{
//可能数据
数据='Lorem ipsum door sit amet，conceditur adipising elit，sed do eiusmod temporal incident ut labour and dolore magna aliqua.但是，在最小限度的情况下，我们不需要在公共消费品上进行任何实践。两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或两个或三个或三个在圣奥卡卡，不可轻率行事，必须为自己的行为负责。”；
//清除所有浏览器更改，如将样式内联等。显示的数据和html必须相同
功能清洁（a）{
if（（a！='undefined'）&&（a！=null））{
a=a.replace（/（\style=“.”）/gi.）。replace（/（）/gi.）。replace（/（）/gi.）。replace（/（\&\；）/gi，“&'）。replace（/（\<\；）/gi，”）。replace（/（\）/gi，”）；
返回a.trim（）；
}
};
//如果它们不同，则追加数据。因此，仅在信息更改时追加数据。
在YECTAR（a，b）中的功能{
如果（clean（$（a）.html（））！=clean（b））{
$（a）.empty（）.append（b）；
}
}
setInterval（函数（）{
inyectar（“主体”，数据）；
}, 1000);
});

您似乎对自己的情况没有足够的了解。从这一点来看，有一些问题，但与您描述的完全不同。我尝试了这个方法，但并没有像您描述的那样随着时间的推移而变慢。我认为您需要发布更多的代码（如果有更多）这个例子很简单，但是如果你看到Chrome的时间线（F12，时间线，点击记录[红色按钮]）内存有问题。如果你在一个应用程序中使用它，你会发现它越来越慢。我认为如果你的代码实际上是那么简单，优化它是不成熟的，我不认为你发布的代码片段会影响你的性能问题。考虑发布更多代码或者推迟你的优化关注，直到它们成为用户体验。问题。在chrome中使用更多内存这一事实并不重要，除非它会给用户带来问题。在所有浏览器中都会产生内存，您可以使用chrome的时间线缓存内存。这就是导致问题的所有代码。这是chrome的结果。所以，直接设置innerHTML是否也会有同样的问题？

    $(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);
});