Ticket #11984 (closed bug: worksforme)
Memory Leaks while appending and removing rows from and to the table
| Reported by: | raghu.kuchi | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
I have a jquery based system, shows a list of entries in a table with auto-refresh. I am using jquery "remove" and "append" methods for removing and adding rows to the table. The auto-refresh happens for every 15 seconds.
Whenever table rows are removed and added, certain amount of memory leak is happening. This behavior is observed in both IE and FF.
Can any one suggest me how to solve this issue.
Here is the performance graph in IE8.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>DOM Parsing - Auto-Refresh</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
var grid, recordno = 0, colCount = 2, rowCount = 100, interval = 15, running = false;
$(function(){
$('#lnk_create').click(doCreate);
$('#lnk_load').click(doLoading);
$('#lnk_start').click(doStart);
$('#lnk_stop').click(doStop);
$('#lnk_remove').click(doUnload);
$('#lnk_create').click();
});
function invoke()
{
if(!running)
{
return;
}
$('#lnk_load').click();
setTimeout(invoke, 1000 * this.interval);
}
function getRow()
{
recordno++;
var list = ["<td>" + recordno + "</td>"];
for(var i = 1; i <= colCount; i++) {
list.push("<td>" + (i + recordno) + "</td>");
list.push("<td>" + "2007-10-" + (i + recordno) + "</td>");
list.push("<td>" + "test " + (i + recordno) + "</td>");
list.push("<td>" + "note " + (i + recordno) + "</td>");
list.push("<td>" + (i + recordno) + "200.00" + "</td>");
list.push("<td>" + (i + recordno) + "</td>");
list.push("<td>" + (i + recordno) + "10.00" + "</td>");
list.push("<td>" + (i + recordno) + "210.00" + "</td>");
}
return list.join(' ');
}
function doLoading()
{
grid.find('tr').remove();
for(var i = 1; i <= rowCount; i++) {
grid.find('tbody').append('<tr>' + getRow() + '</tr>');
}
return false;
}
function doStop()
{
running = false;
return false;
}
function doStart()
{
if(running)
{
return;
}
running = true;
invoke();
return false;
}
function doUnload()
{
grid.find('tr').remove();
grid = undefined;
return false;
}
function doCreate()
{
grid = $('#list');
//grid = $('<table></table>');
return false;
}
</script>
</head>
<body>
<h2>DOM Parsing - Auto-Refresh</h2>
<div id="main">
<div id="toolbar">
<a href="#create" id="lnk_create">create</a>
||
<a href="#start" id="lnk_load">load</a>
||
<a href="#start" id="lnk_start">start</a>
||
<a href="#stop" id="lnk_stop">stop</a>
||
<a href="#remove" id="lnk_remove">remove</a>
</div>
<br />
<div style="height: 480px; overflow: auto;">
<table id="list" border="1"><tbody></tbody></table>
</div>
</div>
</body>
</html>
Thanks Raghu Krishna
Change History
comment:4 Changed 12 months ago by dmethvin
Let's stick with this ticket.
Here is the code in jsfiddle: http://jsfiddle.net/krishnafru/Y6Sk5/embedded/result/
comment:5 Changed 12 months ago by dmethvin
- Status changed from new to closed
- Resolution set to worksforme
I am not seeing any memory leaks using the latest jQuery. http://jsfiddle.net/Y6Sk5/1/show/
The page starts at about 39MB and flattens out around 43MB after a few minutes.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Added the source code in jsfiddle: http://jsfiddle.net/krishnafru/aBQSz/1/embedded/result/