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

问题描述

我有一个应用程序允许用户查看具体情况的详细信息，不需要回发。每次用户从服务器请求数据时，我拉下面的标记。

I have an application that allows a user to view details on a specific case w/out a postback. Each time a user requests data from the server I pull down the following markup.

<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元素，如下所示：

Next I take the above and innerHTML it to a new DOM element like so:

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

but after the above, I use some jQuery to remove the nasty aspnet junk

$('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);

我的问题是这样 - 当使用我注意到没有实际的泄漏，但是越来越多的DOM元素（因此使用内存）。

My question is this - When using IESieve I notice no actual leaks but an ever growing number of DOM elements (thus memory usage).

在客户端可以改进什么来实际清理这个混乱？注意：IE7 / 8显示这些结果。

What can I improve on in the client-side to actually cleanup this mess? Note- both IE7/8 show these results.

编辑：我终于得到了这个工作，决定写一个简短的完整的源代码。

EDIT: I did finally get this working and decided to write a short blog post with complete source code.

推荐答案

棘手的部分是找出违规节点的参考依据。

The tricky part is figuring out where a reference still exists to the offending nodes.

你这样做很困难 - 你将所有标记添加到页面，然后删除不想要的东西。我会这样做：

You're doing this the hard way — you're adding all the markup to the page, then removing the stuff you don't want. I'd do it this way instead:

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;

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

This isn't guaranteed to stop the leak, but it's a good start.

这篇关于如何在JavaScript中处理DOM元素以避免内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！