preventing AJAX内存泄漏 [英] Preventing AJAX memory leaks

问题描述

我的工作，旨在显示一串是与AJAX定期更新数据的Web应用程序。一般的使用情况是，用户会离开它全天开放，并采取在它一眼，然后现在。

I am working on a web application that is designed to display a bunch of data that is updated periodically with AJAX. The general usage scenario would be that a user would leave it open all day and take a glance at it now and then.

我遇到一个问题，即在浏览器的内存占用量增长缓慢随着时间的推移。这是发生在Firefox和IE 7（虽然没有在Chrome）。几个小时后，它可能会导致IE7有〜200MB和FF3的足迹有一个脚印〜400MB。

I am encountering a problem where the browsers memory footprint is growing slowly over time. This is happening in both Firefox and IE 7 (Although not in Chrome). After a few hours, it can cause IE7 to have a footprint of ~200MB and FF3 to have a footprint of ~400MB.

大量的测试后，我发现，如果AJAX调用正在回应了内存泄漏仅发生。如果服务器并没有什么反应，我可以离开页面打开时间和占用空间不会增长。

After a lot of testing, I have found that the memory leak only occurs if the AJAX calls are being responded to. If the server doesn't respond to anything, I can leave the page open for hours and the footprint won't grow.

我使用的原型，我的Ajax调用。所以，我猜有一个问题，的onSuccess回调创建这些内存泄漏。

I am using prototype for my AJAX calls. So, I'm guessing there is an issue with the onSuccess callback creating these memory leaks.

有没有人有preventing内存泄漏任何提示原型/ AJAX？或者对如何解决此问题的任何方式？

Does anyone have any tips on preventing memory leaks with prototype / AJAX? Or any methods on how to troubleshoot this problem?

编辑：发现问题就在于我使用的是JS图形库。可以看出这里。

found out the issue lies in a js graphing library I am using. Can be seen here.

推荐答案

你可以看出来的最重要的事情是事件，以及如何将它们分配。

The biggest thing you can watch out for is events, and how you assign them.

例如，采取此方案（因为你没有提供的）：

For instance, take this scenario (since you haven't provided one):

<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 ）与点击元素事件将被从文件中没有被删除的事件中删除。第二次点击 someButton ，您将有两倍多的事件处理程序和垃圾收集不能删除的第一套。

This will create a memory leak, because when #ajaxResponseTarget is updated (internally, Prototype will use innerHTML) elements with click events will be removed from the document without their events being removed. The second time you click someButton, you will then have twice as many event handlers, and garbage collection can't remove the first set.

一个方法来避免这种情况是使用事件委派：

A way to avoid this is to use event delegation:

<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>

由于对 .someButtonClass 的方式DOM事件的工作，咔嚓也将开火 #ajaxResponseTarget 和原型使得它死的简单，以确定哪些内容是事件的目标。没有事件被分配到元素的在的 #ajaxResponseTarget ，所以没有办法内的目标替换它的内容，以孤立的事件。

Because of the way DOM events work, the "click" on .someButtonClass will fire also on #ajaxResponseTarget, and Prototype makes it dead simple to determine what element was the target of the event. No events are assigned to elements within #ajaxResponseTarget, so there is no way for replacing its contents to orphan events from targets within.

这篇关于preventing AJAX内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！