javascript - 浏览器内存随着 javascript ajax 调用不断增加

Question

我有一个奇怪的行为。我正在使用一个相当大的页面(4000 个节点)来显示用于交付操作的调度系统。每 30 秒。我正在使用 jquery 刷新操作列表(3000 个节点超过 4000 个)。它运行良好，但是......每次，firefox 和 chrome 的内存都增加了 3 到 6ko。当然，过一会，浏览器就崩溃了……

有人知道为什么吗？是内存泄漏吗？ javascript 是否在某处失败？我检查了一下，每次刷新后我都有相同数量的节点，这意味着替换已正确执行。

每次刷新操作后我都会重置几个事件:这里是一个例子

$("#orders_list .list_table_row").hover(
            function(){
            //  mouse over
                $(this).children().css("background-color","#E0E0E0");   
            },
            function(){
            //  mouse out
                $(this).children().css("background-color","");  
            });

非常欢迎任何建议，提示，任何...

我发现了 2 个有趣的链接: http://www.javascriptkit.com/javatutors/closuresleak/index3.shtml和 http://www.jibbering.com/faq/faq_notes/closures.html

谢谢，保罗

修订版 1 - 添加了代码示例和链接

Answer 1

您的问题可能是事件处理程序。每次刷新管理所有这些节点的绑定(bind)和解除绑定(bind)可能过于复杂。

尝试改用事件委托(delegate)。 jQuery 的 .live() 方法就是您想要的。它将使刷新速度更快，并消除事件处理程序的复杂性和泄漏。

代替 $(".myclass").click(/*...*/) 使用 $(".myclass").live("click",/* ...*/)。您只需在页面加载时执行一次，它将适用于该类的所有 future 元素，即使在您的 ajax 刷新之后也是如此。

参见文档:http://api.jquery.com/live/