防止AJAX内存泄漏

Question

我正在开发一个Web应用程序,它旨在显示一组使用AJAX定期更新的数据.一般使用场景是用户将其全天保持打开状态并偶尔看一眼.

我遇到的问题是浏览器内存占用时间逐渐增长.这种情况在Firefox和IE 7中都有发生(尽管不在Chrome中).几个小时后,它可以使IE7占用大约200MB,FF3占用大约400MB.

经过大量测试后,我发现只有在响应AJAX调用时才会发生内存泄漏.如果服务器没有响应任何内容,我可以将页面打开几个小时,并且足迹不会增长.

我正在使用原型进行AJAX调用.所以,我猜测onSuccess回调存在一个问题,造成这些内存泄漏.

有没有人有关于使用原型/ AJAX防止内存泄漏的任何提示？或者有关如何解决此问题的任何方法？

编辑:发现问题在于我正在使用的js图形库.可以在这里看到.

Answer 1

您需要注意的最重要的事情是事件以及如何分配它们.

例如,采取这种情况(因为你还没有提供):

<div id="ajaxResponseTarget">
    ...
</div>
<script type="text/javascript">
    $(someButton).observe('click', function() {
        new Ajax.Updater($('ajaxResponseTarget'), someUrl, {
            onSuccess: function() {
                $$('#ajaxResponseTarget .someButtonClass').invoke('observe', 'click', function() {
                    ...
                });
            }
        });
    });
</script>

这将创建内存泄漏,因为何时#ajaxResponseTarget更新(内部,Prototype将使用innerHTML)具有click事件的元素将从文档中删除而不删除它们的事件.第二次单击时someButton,您将拥有两倍的事件处理程序,垃圾收集无法删除第一组.

避免这种情况的一种方法是使用事件委派:

<div id="ajaxResponseTarget">
    ...
</div>
<script type="text/javascript">
    $('ajaxResponseTarget').observe('click', function(e) {
        if(e.element().match('.someButtonClass')) {
            ...
        }
    });
    $(someButton).observe('click', function() {
        new Ajax.Updater($('ajaxResponseTarget'), someUrl);
    });
</script>

由于DOM事件的工作方式,"点击" .someButtonClass也将启动#ajaxResponseTarget,而Prototype使得确定事件的目标是什么元素变得非常简单.没有事件被分配到元素之内 #ajaxResponseTarget,所以也没有办法为内目标替换它的内容,以孤儿的活动.