我的影片中泄露都IE8和Firefox内存网页; 在Windows进程资源管理器中显示的内存使用率只是不断增长随着时间的推移。
下面的页面请求“unplanned.json”的网址,这是一个静态文件,它不会改变(虽然我把我的Cache-control
HTTP标头no-cache
,以确保Ajax请求始终经过)。 当它得到的结果,它清除了一个HTML表,遍历JSON数组它得到了从服务器返回,并动态地添加行到一个HTML表格数组中的每个条目。 然后它等待2秒,再重复这一过程。
这里就是整个网页:
<html> <head>
<title>Test Page</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head> <body>
<script type="text/javascript">
function kickoff() {
$.getJSON("unplanned.json", resetTable);
}
function resetTable(rows) {
$("#content tbody").empty();
for(var i=0; i<rows.length; i++) {
$("<tr>"
+ "<td>" + rows[i].mpe_name + "</td>"
+ "<td>" + rows[i].bin + "</td>"
+ "<td>" + rows[i].request_time + "</td>"
+ "<td>" + rows[i].filtered_delta + "</td>"
+ "<td>" + rows[i].failed_delta + "</td>"
+ "</tr>").appendTo("#content tbody");
}
setTimeout(kickoff, 2000);
}
$(kickoff);
</script>
<table id="content" border="1" style="width:100% ; text-align:center">
<thead><tr>
<th>MPE</th> <th>Bin</th> <th>When</th> <th>Filtered</th> <th>Failed</th>
</tr></thead>
<tbody></tbody>
</table>
</body> </html>
如果有帮助,这里是我送回来的JSON的例子(它的这个确切的阵列wuith成千上万个条目,而不是一个):
[
{
mpe_name: "DBOSS-995",
request_time: "09/18/2009 11:51:06",
bin: 4,
filtered_delta: 1,
failed_delta: 1
}
]
编辑:我已经接受Toran的非常有用的答案,但我觉得我应该张贴一些额外的代码,因为他的removefromdom
jQuery插件,有一些限制:
- 它不仅能消除单个元素。 所以,你不能给它像`$查询(“#内容TBODY TR”)`,并期望它删除所有你所指定的元素。
- 你用它删除任何元素都必须有一个'id`属性。 所以,如果我想删除我的`tbody`,那么我必须指定一个`id`我`tbody`标签,否则它会给出一个错误。
- 它消除了元件本身和其所有后代,所以,如果你只是想清空该元素,那么你就必须在事后重新创建(或修改插件清空,而不是删除)。
因此,这里是我的网页上面修改为使用Toran的插件。 为了简单起见,我没有申请任何性能一般建议由Peter提供 。 这里的页面现在不再内存泄漏:
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
<!--
$.fn.removefromdom = function(s) {
if (!this) return;
var el = document.getElementById(this.attr("id"));
if (!el) return;
var bin = document.getElementById("IELeakGarbageBin");
//before deleting el, recursively delete all of its children.
while (el.childNodes.length > 0) {
if (!bin) {
bin = document.createElement("DIV");
bin.id = "IELeakGarbageBin";
document.body.appendChild(bin);
}
bin.appendChild(el.childNodes[el.childNodes.length - 1]);
bin.innerHTML = "";
}
el.parentNode.removeChild(el);
if (!bin) {
bin = document.createElement("DIV");
bin.id = "IELeakGarbageBin";
document.body.appendChild(bin);
}
bin.appendChild(el);
bin.innerHTML = "";
};
var resets = 0;
function kickoff() {
$.getJSON("unplanned.json", resetTable);
}
function resetTable(rows) {
$("#content tbody").removefromdom();
$("#content").append('<tbody id="id_field_required"></tbody>');
for(var i=0; i<rows.length; i++) {
$("#content tbody").append("<tr><td>" + rows[i].mpe_name + "</td>"
+ "<td>" + rows[i].bin + "</td>"
+ "<td>" + rows[i].request_time + "</td>"
+ "<td>" + rows[i].filtered_delta + "</td>"
+ "<td>" + rows[i].failed_delta + "</td></tr>");
}
resets++;
$("#message").html("Content set this many times: " + resets);
setTimeout(kickoff, 2000);
}
$(kickoff);
// -->
</script>
<div id="message" style="color:red"></div>
<table id="content" border="1" style="width:100% ; text-align:center">
<thead><tr>
<th>MPE</th>
<th>Bin</th>
<th>When</th>
<th>Filtered</th>
<th>Failed</th>
</tr></thead>
<tbody id="id_field_required"></tbody>
</table>
</body>
</html>
进一步编辑:我会离开我的问题没有改变,虽然这是值得注意的是,此内存泄漏无关使用Ajax。 事实上,下面的代码将内存泄漏一样的,并可以很容易地与Toran的解决removefromdom
jQuery插件:
function resetTable() {
$("#content tbody").empty();
for(var i=0; i<1000; i++) {
$("#content tbody").append("<tr><td>" + "DBOSS-095" + "</td>"
+ "<td>" + 4 + "</td>"
+ "<td>" + "09/18/2009 11:51:06" + "</td>"
+ "<td>" + 1 + "</td>"
+ "<td>" + 1 + "</td></tr>");
}
setTimeout(resetTable, 2000);
}
$(resetTable);