{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Juvenile、少年° 的问题《increasing memory usage with jquery》','https://www.manongdao.com/q-1301998.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am developing a site which heavily uses jquery (UI) for providing a good user experience. For some (stupid) reason parts of this site are shown within an iframe and there also is a button for refreshing the iframe to get the latest data from the server.
The problem is that each time when refreshing the iframe the memory usage increases leading to serious memory problems after some time (Tested in IE8 & 9). But this occurs only if the jquery library is loaded. This behaviour can be seen best when using Drip/Sieve. For better understanding the problem I stripped off all unnecessary code leading to the two files below. With each reload the memory usage increases about 800 kb. (try http://jsbin.com/asamid/7 if you want to reproduce)
How can i prevent jquery from eating away my memory? Is there a way to manually unload all jquery before reloading?
index.htm: (see http://jsbin.com/asamid/7/edit#html,live)
<html>
<head>
<title>Memory Leak - Parent</title>
<script type="text/javascript">
function reload() {
var frame = document.getElementById("testFrame");
frame.src = "frame.htm";
}
</script>
</head>
<body>
<a href="javascript:reload()" id="link">reload frame</a>
<iframe id="testFrame" src="frame.htm" />
</body>
</html>
frame.htm: (see http://jsbin.com/ocuval/edit#html,live)
<html>
<head>
<title>Memory Leak - Frame</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Test Frame</h2>
<div>lorem ipsum</div><div>lorem ipsum</div><div>lorem ipsum</div><div>lorem ipsum</div><div>lorem ipsum</div><div>lorem ipsum</div>
</body>
</html>
Experiment with one or more of the following: