防止AJAX内存泄漏

你能注意的最大的事情是事件,以及你如何分配它们。

例如,以这个场景为例(因为您没有提供):

<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 已更新(内部,原型将使用 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 ,因此无法将其内容替换为中目标的孤立事件。

我可能错了,但听起来好像是在响应对象周围创建闭包。每个响应对象都会不同,这会导致内存占用增加。