内存泄漏，createElement和表单控件 [英] Memory Leaks, createElement, and Form Controls
问题描述
（最初错误发布在mpsjscript上......）
我刚关闭了Firefox中的所有窗口，并使用了244MB的内存。
我不知道为什么。我打开了GMail，一个来自unicode的页面，CLJ FAQ。
我注意到createElement泄漏了。表单控件很明显
因为表单将控件名称保留为属性。
示例：
<！doctype html>
< body>
< form>< input name =" foo" />< / form>
< script>
document.forms [0] .foo;
document.forms [0] .innerHTML = " ;;
document.write（document.forms [0] .foo）;
< / script>
< / body>
将输出：
[object HTMLInputElement]
（或类似的依赖于实现的字符串） 。
如果节点被添加到文档中，则为该节点分配内存。
删除该节点后，内存使用量将减少，但不是之前的b $ b。
所以FORM控制泄密记忆。这就出现了：
http://groups.google.com/group/comp....ef6b0710?tvc=1
如果我创建了会发生什么，比如100 divs，然后将它们删除？
使用Firefox 3.0.1
嗯，我做到了。我重启了Firefox。并注意到53mb的内存使用量。
我填写了100。对于文本输入并单击periodicCreate（）。
在不到一分钟后达到100。我再次检查内存使用情况
，这是89.38mb。
我点击了destroy并等了几分钟，看着内存增加了，而且Firefox变得反应迟钝，CPU飙升至100％。
destroy几分钟后完成，我注意到内存使用情况
为85.00mb。
一分钟后，实际内存仍然在85mb左右。我重新加载页面。
85mb。我导航到google.com。仍然是85mb。
这是我的测试页面：
<！DOCTYPE html>
< html lang =" en">
< head>
< title> div Memory Leak< / title>
< meta http-equiv =" Content-Type" content =" text / html; charset = utf-8">
< style type =" text / css">
input {display：none ; }
< / style>
< / head>
< body>
< h1> ;将DIV添加到DIV< / h1>
< button onclick =" create（）"> create（）< / button>
< button onclick =" destroy（）"> destroy（）< / button>
< button onclick =" periodicCreate（）"> periodicCreate（）< / button>
< input type =" text"值= QUOT; 20"风格= QUOT;显示：块" id =''per''>
< pre id =" mon">
启动前检查内存消耗。
< / pre>
< pre id =" mon2">
-
< / pre>
< div id =''cont''><！ - 如果表单元素标记更改为div，则
不会发生泄漏 - > ;< / div>
< script type =''text / javascript''>
var mon = document.getElementById（''mon''），
keyMon = document.getElementById（''mon2''）。firstChild;
var p = document.getElementById（''cont''）;
keys = [];
function create（）{
var n =" n" + +新日期;
keys.push（n）;
setTimeout（addInputs，10）;
}
函数addInputs（）{
var inp = document.createElement（''div''），
c，
n = keys [keys.length-1];
for（var i = 0; i< 1000; i ++）{
c = inp.cloneNode（false）;
//添加标题属性，
//以增加内存。
c.title =" T" + i;
p.appendChild（c）;
}
keyMon.data + =（keys.length）+"名称前缀： + n +请
wait.\r\\\
" ;;
addInputs.done（）;
}
addInputs.done = function（）{};
函数periodicCreate（）{
if（periodicCreate.i == + document.getElementById（''per） ''）。value）
返回;
create（）;
addInputs.done = function（）{
periodicCreate.i ++;
periodicCreate（）;
};
}
periodicCreate.i = 0 ;
函数destroy（）{
mon.innerHTML ="设置innerHTML =''''。请等待......" ;;
p.innerHTML ="" ;;
mon.innerHTML =" done。再次检查内存消耗。;
}
< / script>
< / body>
< / html>
================================ ===========
因此，Firefox使用createElement / appendChild泄漏内存。
dhtml写道：
我刚关闭了Firefox中的所有窗口及其使用244MB内存。
等到FIREFOX.EXE进程终止（通过关闭
所有窗口启动），然后它将使用0M记忆。另外，哪个内存确实是什么？b / b $ block $ =post_quotes>
[...]
我注意到了createElement泄漏。表单控件
很明显，因为表单将控件名称保存为属性。
你没有注意到这种类型。
例如：
<！doctype html>
< body>
< form>< input name =" foo" /> < / form>
< script>
这甚至不是远程有效，你在抱怨？
document.forms [0]包含.foo;
这除了参考分辨率之外什么都不做。
document.forms [0] .innerHTML = "英寸;
所以你试图创建一个空的`form''元素，这是无效的。
< http ：//www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3>
document.write（ document.forms [0] .foo）;
< / script>
< / body>
将输出：
[object HTMLInputElement]
按设计工作。 Good Thing。
（或类似的依赖于实现的字符串）。
所以你甚至没有在第一个
的地方抱怨基于Gecko的UA？因为只有一个Gecko DOM实现。
[...]
这是我的测试页面：
<！DOCTYPE html>
无效。
[...]
所以，Firefox使用createElement / appendChild泄漏内存。
这是一个不正确的假设。显然你既没有理解
HTML，DOM或Windows内存管理，也不知道垃圾收集如何工作：一个不再被引用的对象最终被标记为
用于垃圾收集，可能会或可能不会在以后发生。这将是非常有效的，因为垃圾收集会在一个物品后立即发生，因为它不再被引用。
PointedEars
于05.10.2008 D3。 14：33，/ Thomas''PointedEars''Lahn /：
dhtml写道：
> ;<！doctype html>
< body>
< form>< input name =" foo" />< / form>
<脚本>
这甚至不是远程有效，你在抱怨？
> [... ]
这是我的测试页面：
<！DOCTYPE html>
再次无效。
后者是格式良好的XML（我猜SGML也是）DOCTYPE
声明。前者似乎是有效的HTML 5
< http://www.w3.org/html/wg/html5/#the-doctype>。
-
Stanimir
Stanimir Stamenkov写道：
On 05.10 .2008 D3。 14：33，/ Thomas''PointedEars''Lah /：
> dhtml写道：
>><！doctype html>
[...]
<！DOCTYPE html>
再次无效。
后者是格式良好的XML（我猜也是SGML）DOCTYPE
声明。
格式良好，但不是有效的。
前者似乎是有效的HTML 5
< http://www.w3.org/html/wg/html5/#the-doctype>。
" HTML 5"是一个工作草案的早期阶段，有争议的权威。
PointedEars
-
使用任何版本的Microsoft Frontpage创建你的网站。
（这不会阻止人们查看您的来源，但没有人
会想要窃取它。）
- - 来自< http：//www.vortex-webdesign.com/help/hidesource.htm>
(originally mis-posted on m.p.s.jscript...)
I''ve just closed all windows in Firefox and its using 244MB of memory.
I have no idea why. I had GMail open, a page from unicode, the CLJ FAQ.
I''ve noticed that createElement leaks. It''s obvious with form controls
because the form keeps the control name as a property.
Example:
<!doctype html>
<body>
<form><input name="foo"/></form>
<script>
document.forms[0].foo;
document.forms[0].innerHTML = "";
document.write(document.forms[0].foo);
</script>
</body>
Will output:
[object HTMLInputElement]
(or similar implementation-dependent string).
If a node is added to the document, memory is allocated for that node.
When that node is removed, the memory usage goes back down, but not to
where it was before.
So FORM controls leak memory. This came up here:
http://groups.google.com/group/comp....ef6b0710?tvc=1
So what happens if I create, say 100 divs, then remove them?
Using Firefox 3.0.1
Well, I did that. I restarted Firefox. and noted the memory usage at "53mb".
I filled in "100" for the text input and clicked "periodicCreate()".
It reached 100 after a less than a minute. I checked the memory usage
again and it was 89.38mb.
I clicked "destroy" and waited a few minutes, watching the memory
increase and Firefox became unresponsive and CPU spiked to 100%.
"destroy" completed several minutes later, and I noted the memory usage
at 85.00mb.
A minute later, real memory remains at around 85mb. I reloaded the page.
85mb. I navigated to google.com. Still at 85mb.
Here is my test page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>div Memory Leak</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
input { display: none; }
</style>
</head>
<body>
<h1>Adding DIV to DIV</h1>
<button onclick="create()">create()</button>
<button onclick="destroy()">destroy()</button>
<button onclick="periodicCreate()">periodicCreate()</button>
<input type="text" value="20" style="display:block" id=''per''>
<pre id="mon">
Check memory consumption before starting.
</pre>
<pre id="mon2">
-
</pre>
<div id=''cont''><!-- if the form element tag is changed to "div",
the leak does not occur --></div>
<script type=''text/javascript''>
var mon = document.getElementById(''mon''),
keyMon = document.getElementById(''mon2'').firstChild;
var p = document.getElementById(''cont'');
keys = [];
function create() {
var n = "n" + +new Date;
keys.push(n);
setTimeout(addInputs, 10);
}
function addInputs() {
var inp = document.createElement(''div''),
c,
n = keys[keys.length-1];
for(var i = 0; i < 1000; i++) {
c = inp.cloneNode(false);
// add a title property,
// to increase memory.
c.title = "T" + i;
p.appendChild(c);
}
keyMon.data += (keys.length) + " name prefix: " + n + " please
wait.\r\n";
addInputs.done();
}
addInputs.done = function(){};
function periodicCreate() {
if(periodicCreate.i == +document.getElementById(''per'').value)
return;
create();
addInputs.done = function() {
periodicCreate.i++;
periodicCreate();
};
}
periodicCreate.i = 0;
function destroy() {
mon.innerHTML = "setting innerHTML = ''''. Please wait...";
p.innerHTML = "";
mon.innerHTML = "done. Check memory consumption again.";
}
</script>
</body>
</html>
===========================================
So, Firefox leaks memory with createElement/appendChild.
dhtml wrote:I''ve just closed all windows in Firefox and its using 244MB of memory.Wait till the FIREFOX.EXE process was terminated (as initiated by closing
all of its windows), then it will use 0M of memory. Besides, which memory
exactly?
[...]
I''ve noticed that createElement leaks. It''s obvious with form controls
because the form keeps the control name as a property.You have noticed nothing of the sort.
Example:
<!doctype html>
<body>
<form><input name="foo"/></form>
<script>That is not even remotely Valid, and you are complaining?
document.forms[0].foo;This does not do anything except reference resolution.
document.forms[0].innerHTML = "";So you are trying to create an empty `form'' element, which is not Valid.
<http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3>
document.write(document.forms[0].foo);
</script>
</body>
Will output:
[object HTMLInputElement]Works as designed. Good Thing.
(or similar implementation-dependent string).So you are not even complaining only about Gecko-based UAs in the first
place? Because there is only one Gecko DOM implementation.
[...]
Here is my test page:
<!DOCTYPE html>Not Valid again.
[...]
So, Firefox leaks memory with createElement/appendChild.That is an incorrect assumption. Apparently you have neither understood
HTML, the DOM, or Windows memory management nor how garbage collection
works: an object that is no longer being referred to is eventually marked
for garbage collection that may or may not come later. It would be very
inefficient would garbage collection take place immediately after an object
would no longer being referred to.
PointedEars
On 05.10.2008 D3. 14:33, /Thomas ''PointedEars'' Lahn/:dhtml wrote:
><!doctype html>
<body>
<form><input name="foo"/></form>
<script>
That is not even remotely Valid, and you are complaining?
>[...]
Here is my test page:
<!DOCTYPE html>
Not Valid again.The later is well-formed XML (I guess SGML, too) DOCTYPE
declaration. The former appears to be valid HTML 5
<http://www.w3.org/html/wg/html5/#the-doctype>.
--
Stanimir
Stanimir Stamenkov wrote:On 05.10.2008 D3. 14:33, /Thomas ''PointedEars'' Lahn/:>dhtml wrote:>><!doctype html>
[...]
<!DOCTYPE html>Not Valid again.
The later is well-formed XML (I guess SGML, too) DOCTYPE
declaration.Well-formed maybe, but not Valid.
The former appears to be valid HTML 5
<http://www.w3.org/html/wg/html5/#the-doctype>."HTML 5" is a Working Draft in its early stages, and of disputable authority.
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won''t prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
这篇关于内存泄漏，createElement和表单控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
