如何在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都显示了这些结果.

编辑:我终于得到了这个工作,并决定写一篇包含完整源代码的简短博文.

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;

这不能保证能够阻止泄漏,但这是一个良好的开端.

Answer 2

function discardElement(element) {
    var garbageBin = document.getElementById('IELeakGarbageBin');
    if (!garbageBin) {
        garbageBin = document.createElement('DIV');
        garbageBin.id = 'IELeakGarbageBin';
        garbageBin.style.display = 'none';
        document.body.appendChild(garbageBin);
    }
    // move the element to the garbage bin 
    garbageBin.appendChild(element);
    garbageBin.innerHTML = '';
}

资源