浏览器内存随着javascript ajax调用而不断增加 [英] browser memory increasing constantly with javascript ajax calls

问题描述

我有一个奇怪的行为.我正在使用一个相当沉重的页面(4000个节点)，该页面旨在显示用于交付操作的分派系统.每30秒.我正在用jquery刷新操作列表(4000个操作中有3000个节点).它工作得很好，但是...每次，Firefox和Chrome的内存都增加了3至6ko.当然，一段时间后，浏览器崩溃...

I have a strange behaviour. I am using a rather heavy page (4000 nodes) meant to display a dispatch system for delivery operations. Every 30 sec. I am refreshing with jquery, the list of operations (3000 nodes over 4000). It works perfectly well, but... each time, the memory of both firefox and chrome is increasing by 3 to 6ko. Of course, after a while, the browser crashes...

有人有什么主意吗?是内存泄漏吗? JavaScript是否会失败?我检查了一下，每次刷新后，我的节点数都相同，这意味着替换操作正确执行.

Does anybody have any kind of idea why? Is it a memory leak? Does javascript fail to somewhere? I checked, and after each refresh I have the same number of nodes which means the replacement is performed properly.

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

After each refresh operation I reset a couple of events : here is an example

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

任何建议都非常受欢迎，提示，任何东西...

Any suggestion is really welcome, hints, anything...

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

I found 2 interesting links : http://www.javascriptkit.com/javatutors/closuresleak/index3.shtml and http://www.jibbering.com/faq/faq_notes/closures.html

谢谢， 保罗

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

Revision 1 - added code sample and links

推荐答案

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

Your problem is probably the event handlers. Managing the binding and unbinding of all those nodes every refresh is probably over-complex.

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

Try using event delegation instead. jQuery's .live() method is what you want. It will make the refreshes faster and remove the event handler complexity and leaks.

使用$(".myclass").live("click", /*...*/)代替$(".myclass").click(/*...*/).您只需在页面加载时执行一次，它就可以与该类的所有将来元素一起使用，甚至在刷新ajax之后也是如此.

Instead of $(".myclass").click(/*...*/) use $(".myclass").live("click", /*...*/). You only have to do it once, at page load, and it will work for all future elements with that class, even following your ajax refreshes.

请参阅文档: http://api.jquery.com/live/

这篇关于浏览器内存随着javascript ajax调用而不断增加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！