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

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

<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及其完整的源代码。

最佳答案

棘手的部分是弄清楚哪里仍然存在对有问题的节点的引用。

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

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;

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

关于javascript - 如何在JavaScript中处理DOM元素以避免内存泄漏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/768621/