javascript - 如何在 JavaScript 中处理 DOM 元素以避免内存泄漏

Question

我有一个应用程序，允许用户查看特定案例的详细信息，而无需回发。每次用户从服务器请求数据时，我都会拉下以下标记。

<form name="frmAJAX" method="post" action="Default.aspx?id=123456" id="frmAJAX">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" />
</div>
<div id="inner">
<!-- valid info here --!>
</div>
</form>

接下来，我将上面的内容和innerHTML 转换为一个新的 DOM 元素，如下所示:

   success: function(xhtml) {
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        var container = document.createElement('div');

        obj.parentNode.parentNode.parentNode.insertBefore(tr, obj.parentNode.parentNode.nextSibling);

        td.appendChild(container);
        container.innerHTML = xhtml;
        tr.appendChild(td);

但是在上面之后，我使用一些 jQuery 来删除讨厌的 aspnet 垃圾

$('form:eq(1)').children().each(
    function() {
        if ($('form:eq(1)').find('div').filter(function() { return $(this).attr('id') == ''; }).remove());
    }
);

//Capture the remaining children
var children = $('form:eq(1)').children();

// Remove the form
$('form:eq(1)').remove();

// append the correct child element back to the DOM
parentObj.append(children);

我的问题是这样的 - 当使用 IESieve 时，我注意到没有实际的泄漏，但 DOM 元素的数量不断增加(因此内存使用量)。

我可以在客户端进行哪些改进来真正清理这个烂摊子？注意 - IE7/8 都会显示这些结果。

编辑:我终于开始工作了，并决定编写一个带有完整源代码的简短blog post。

Answer 1

棘手的部分是找出对违规节点的引用仍然存在的位置。

您这样做的方式很困难 - 您将所有标记添加到页面，然后删除您不需要的内容。我会这样做:

var div = document.createElement('div');
// (Don't append it to the document.)

$(div).html(xhtml);

var stuffToKeep = $(div).find("form:eq(1)> *").filter(
  function() {
    return $(this).attr('id') !== '';
  }
);

parentObj.append(stuffToKeep);

// Then null out the original reference to the DIV to be safe.
div = null;

这并不能保证阻止泄漏，但这是一个好的开始。