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.

[[Image(http://www.keepandshare.com/userpics/k/r/i/s/hnafru/2012-06/sm/report-69919568.jpg?ts=1340874030)]]

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

Attachments (0)

Change History (5)

Changed June 28, 2012 09:27AM UTC by raghu.kuchi comment:1

Added the source code in jsfiddle:

http://jsfiddle.net/krishnafru/aBQSz/1/embedded/result/

Changed June 29, 2012 02:44PM UTC by dmethvin comment:2

#11986 is a duplicate of this ticket.

Changed June 30, 2012 04:34PM UTC by anonymous comment:3

Replying to [comment:2 dmethvin]:

#11986 is a duplicate of this ticket.

Please delete this ticket and consider the ticket 11986

thanks

raghu krishna kuci

Changed July 03, 2012 04:50PM UTC by dmethvin comment:4

Let's stick with this ticket.

Here is the code in jsfiddle: http://jsfiddle.net/krishnafru/Y6Sk5/embedded/result/

Changed July 03, 2012 05:00PM UTC by dmethvin comment:5

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.

Side navigation

#11984 closed bug (worksforme)