如何在 JavaScript 中处理 DOM 元素以避免内存泄漏 [英] How to dispose of DOM elements in JavaScript to avoid memory leaks
问题描述
我有一个应用程序,允许用户在没有回发的情况下查看特定案例的详细信息.每次用户从服务器请求数据时,我都会下拉以下标记.
<div><input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"/>
<div id="内部"><!-- 这里的有效信息--!>
</表单>
接下来我将上面的内容和 innerHTML 变成一个新的 DOM 元素,如下所示:
成功: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.innerHTML = xhtml;tr.appendChild(td);
但是在上面之后,我使用了一些jQuery来删除讨厌的aspnet垃圾
$('form:eq(1)').children().each(功能() {if ($('form:eq(1)').find('div').filter(function() { return $(this).attr('id') == ''; }).remove());});//捕获剩余的孩子var children = $('form:eq(1)').children();//删除表单$('form:eq(1)').remove();//将正确的子元素追加回 DOMparentObj.append(children);
我的问题是 - 在使用 IESieve 时,我注意到没有实际泄漏,但越来越多DOM 元素(因此内存使用).
我可以在客户端改进什么来真正清理这个烂摊子?注意 - IE7/8 都显示了这些结果.
编辑:我终于开始工作并决定写一个简短的博文 带有完整的源代码.
棘手的部分是找出哪里仍然存在对违规节点的引用.
您这样做很困难——您将所有标记添加到页面,然后删除您不想要的内容.我会这样做:
var div = document.createElement('div');//(不要将其附加到文档中.)$(div).html(xhtml);var stuffToKeep = $(div).find("form:eq(1)> *").filter(功能() {返回 $(this).attr('id') !== '';});parentObj.append(stuffToKeep);//然后为安全起见,将 DIV 的原始引用归零.div = 空;
这不能保证阻止泄漏,但这是一个好的开始.
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>
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);
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);
My question is this - When using IESieve I notice no actual leaks but an ever growing number of DOM elements (thus memory usage).
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 元素以避免内存泄漏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!