Bug Tracker

Opened 10 years ago

Closed 10 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.

http://www.keepandshare.com/userpics/k/r/i/s/hnafru/2012-06/sm/report-69919568.jpg

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>
        &nbsp;||&nbsp;
        <a href="#start" id="lnk_load">load</a>
        &nbsp;||&nbsp;
        <a href="#start" id="lnk_start">start</a>
        &nbsp;||&nbsp;
        <a href="#stop" id="lnk_stop">stop</a>
        &nbsp;||&nbsp;
        <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 10 years ago by raghu.kuchi

Added the source code in jsfiddle: ​http://jsfiddle.net/krishnafru/aBQSz/1/embedded/result/

comment:2 Changed 10 years ago by dmethvin

#11986 is a duplicate of this ticket.

comment:3 in reply to:  2 Changed 10 years ago by anonymous

Replying to dmethvin:

#11986 is a duplicate of this ticket.

Please delete this ticket and consider the ticket 11986

thanks raghu krishna kuci

comment:4 Changed 10 years 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 10 years ago by dmethvin

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.

Note: See TracTickets for help on using tickets.