Bug Tracker

Modify

Ticket #1229 (closed bug: duplicate)

Opened 7 years ago

Last modified 7 years ago

IE pseudo memory leak

Reported by: jackysee Owned by:
Priority: major Milestone: 1.1.3
Component: event Version: 1.1.2
Keywords: Cc:
Blocking: Blocked by:

Description

I'm making a page which would make ajax called periodically. The page itself would not be fresh. The callback will remove all table rows and refresh them to new one to the new data.

Regardless of the ajax part, I found that there will be memory leak in IE when using jQuery to clear table rows and insert again. MS called it 'pseudo leak' as it would be cleared after page refresh. (some detail:  http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp ) But as the page will stay, such leak would gradually increase the browser's memory.

Following is an simple example demonstrating it. I use the tools IESieve ( http://home.wanadoo.nl/jsrosman/) to detect IE's memory and dom usage. You can repeat the test by:

  1. open IESieve and load the test page
  2. click on 'refreshes all rows', you should notice increase in dom object in use.
  3. click on 'remove all rows', the dom usage is not decreased

OR

  1. click on 'start interval', you will see the memory and dom usage both increase
<html>
	<head>
		<title>Test Mem Leak in IE6</title>
		<script type="text/javascript" src="jquery-1.1.2.js"></script>
		<script type="text/javascript">
			var datas = [
				[1,2,3,4,5],
				[1,2,3,4,5],
				[1,2,3,4,5],
				[1,2,3,4,5],
				[1,2,3,4,5],
				[1,2,3,4,5]
			];
			
			
			$(document).ready(function(){
				$("#remove").click(removeAllRows);
				$("#refresh").click(refreshRows);
				$("#interval").click(startRefresh);
				
			});
			
			function startRefresh(){
				var interval = setInterval(refreshRows,5*1000);
			}
			
			function refreshRows(){
				removeAllRows();
				for(var i=0; i<datas.length; i++){
					var tr = document.createElement("tr");
					for(var j=0; j<datas[i].length; j++){
						var td = document.createElement("td");
						var d = datas[i][j]*Math.floor(Math.random()*100+1);
						td.innerHTML = 
							"<a href='#' onclick='return false;'>"+d+"</a>" +
							"<input type='button' onclick='buttonClick(this)' value='"+datas[i][j]+"'/>";
						$(tr).append(td);
						td = null;
						d = null;
					}
					var tb = $("#test>tbody").append(tr);
				}
			}
			
			function removeAllRows(){
				var tb = $("#test>tbody")
					.find("*").unbind().end()
					.html("");
			}
			
			function buttonClick(obj){
				obj.value = 'btn';
			}
			
			
		</script>
	</head>
	<body>
		<table id="test" border="1">
			<thead>
				<tr>
					<th>th1</th>
					<th>th2</th>
					<th>th3</th>
					<th>th4</th>
					<th>th5</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<input type="button" value="remove all rows" id="remove"/>
		<input type="button" value="refresh all rows" id="refresh"/>
		<input type="button" value="start interval" id="interval"/>
	
	</body>

</html>

Change History

comment:1 Changed 7 years ago by john

  • Status changed from new to closed
  • Resolution set to duplicate

Duplicate of #1226.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.