Opened 11 years ago
Closed 11 years ago
#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: | ||
Blocked by: | Blocking: |
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 (5)
comment:1 Changed 11 years ago by
comment:3 Changed 11 years ago by
comment:4 Changed 11 years ago by
Let's stick with this ticket.
Here is the code in jsfiddle: http://jsfiddle.net/krishnafru/Y6Sk5/embedded/result/
comment:5 Changed 11 years ago by
Resolution: | → worksforme |
---|---|
Status: | new → closed |
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.
Added the source code in jsfiddle: http://jsfiddle.net/krishnafru/aBQSz/1/embedded/result/