javascript memory leak

Posted on 2009-07-03 filed under: AJAX (RSS) 351 views

When a management system can not correct the allocation of his memory, the system there is memory leak, which is a system bug. The phenomenon of memory leaks can be called the failure of the procedure, such as the implementation of slow-down.
Microsoft's Internet Explorer on the existence of a series of memory leaks, even the most serious of which is the implementation of the leak when Jscript. When a DOM object includes a JavaScript object (such as an event handler) is invoked, if the JavaScript object at the same time also includes the DOM object, then the circular reference is formed. This structure is essentially no problem. At this point, because the DOM objects and the event handler does not invoke the existence of other, then the garbage collector (an automatic memory resource manager) that they should be all the recovery points, and the memory released. JavaScript's garbage collector can detect this circular reference and does not have confused him. Unfortunately, however, IE DOM's memory can not be managed Jscript. He has his own memory management system, the system did not know, however circular reference, making everything becomes chaos. This has led, when the circular reference shape, the release of the work of memory can not be completed, that is, have had a memory leak. Long period of time will have a memory leak of the lack of memory, making the browser because of the lack of the necessary memory and the collapse? .
To demonstrate what we can. -Question1 procedures in the first paragraph, we will dynamically create a set of 10 for a total of 10,000 of the DOM element (<span>), create a deletion of 10 and then 10 in the creation of such a cycle. You run this program to open Windows Task Manager can be observed that the run-time page PF (virtual memory) utilization rate has been unchanged. Utilization of changes in PF memory allocation can be regarded as indicators of whether the invalid.

Question1
<html>
<head>
<title> Queue Test 1 </ title>
</ head>
<body>
<script>
/ * global setTimeout * /
(function (limit, delay) (
var queue = new Array (10);
var n = 0;

function makeSpan (n) (
var s = document.createElement ( 'span');
document.body.appendChild (s);
var t = document.createTextNode ( '' + n);
s.appendChild (t);
return s;
)

function process (n) (
queue.push (makeSpan (n));
var s = queue.shift ();
if (s) (
s.parentNode.removeChild (s);
)
)

function loop () (
if (n <limit) (
process (n);
n + = 1;
setTimeout (loop, delay);
)
)

loop ();
)) (10000, 10);
</ script>
</ body>
</ html>

Next, we run the second paragraph of the procedure queuetest2. In addition to doing the same thing with the outside queuetest1, each element of it has not yet added a click event response function. In Mozila and Opera, the virtual queuetest1 utilization and PF is the same, but in IE, we can see that as a result of memory leak caused by a trillion per second, the stability of the virtual memory incremental, usually such a disclosure will not be the attention of to. However, due to the increasing popularity of Ajax, the page in the browser's growth residence time, the problem has become common.
Question2
<html>
<head> <title> Queue Test 2 </ title>
</ head>
<body>
<script>
/ * global setTimeout * /
(function (limit, delay) (
var queue = new Array (10);
var n = 0;

function makeSpan (n) (
var s = document.createElement ( 'span');
document.body.appendChild (s);
var t = document.createTextNode ( '' + n);
s.appendChild (t);
s.onclick = function (e) (
s.style.backgroundColor = 'red';
alert (n);
);
return s;
)

function process (n) (
queue.push (makeSpan (n));
var s = queue.shift ();
if (s) (
s.parentNode.removeChild (s);
)
)

function loop () (
if (n <limit) (
process (n);
n + = 1;
setTimeout (loop, delay);
)
)

loop ();
)) (10000, 10);
</ script>
</ body>
</ html>

Because IE can not recover on the circular reference, so the task falls on our shoulders. Clear if we break the circular reference, then the IE will be able to complete the garbage collection work. With Microsoft's explanation, memory leaks caused by closure of the reason is, however, this conclusion is certainly very wrong, and that Microsoft makes recommendations to the developer's proposal has become wrong. Then through the DOM to break the circular reference is more simple, because virtually impossible to achieve through Jscript.
When we dealt with an element, we must pass it the event handler for all the air to achieve the purpose of destruction of circular reference. We need to do is to make each event handler is set to empty it. We can even clean-up functions to complete this work.
Clean-up function will be to keep a reference to DOM elements. It will cycle of detection of all the attributes of this element. If it is found that the time function, so its value is empty. This undermines the circular reference, making the release of the memory can be recovered. It will also detect the same subset of elements of the element to break the cycle of their quote. The clean-up function, only in effect in IE, Mozilla and Opera for all null and void. Whether to use removeChild () or innerHTML property set the value of the element should be removed before the clean-up function calls.
function purge (d) (
var a = d.attributes, i, l, n;
if (a) (
l = a.length;
for (i = 0; i <l; i + = 1) (
n = a [i]. name;
if (typeof d [n] === 'function') (
d [n] = null;
)
)
)
a = d.childNodes;
if (a) (
l = a.length;
for (i = 0; i <l; i + = 1) (
purge (d.childNodes [i]);
)
)
)
Well, we are transported to the first three new procedures, queuetest3, in the process 3, the elements in the call to be removed before the clean-up function.
Question3
<html>
<head> <title> Queue Test 3 </ title>
</ head>
<body>
<p>
Queue Test 3 adds an event handler to each span, and removes it when
finished. See <a href="http://www.crockford.com/javascript/memory/leak.html"> http://www.crockford.com/javascript/memory/leak.html </ a>
</ p>
<script>
/ * global onunload, setTimeout * /
(function (limit, delay) (
var queue = new Array (10);
var n = 0;

function makeSpan (n) (
var s = document.createElement ( 'span');
document.body.appendChild (s);
var t = document.createTextNode ( '' + n);
s.appendChild (t);
s.onclick = function (e) (
s.style.backgroundColor = 'red';
alert (n);
);
return s;
)

function purge (d) (
var a = d.attributes, i, l, n;
if (a) (
l = a.length;
for (i = 0; i <l; i + = 1) (
n = a [i]. name;
if (typeof d [n] === 'function') (
d [n] = null;
)
)
)
a = d.childNodes;
if (a) (
l = a.length;
for (i = 0; i <l; i + = 1) (
purge (d.childNodes [i]);
)
)
)

function process (n) (
queue.push (makeSpan (n));
var s = queue.shift ();
if (s) (
purge (s);
s.parentNode.removeChild (s);
)
)

function loop () (
if (n <limit) (
process (n);
n + = 1;
setTimeout (loop, delay);
)
)
onunload = function (e) (
purge (document.body);
);

loop ();
)) (10000, 10);
</ script>
</ body>
</ html>

Update: Microsoft released a patch this problem: 929874. If you have full confidence to ensure that all your users have access to the update, then you will no longer be required to clear the above function. Unfortunately, this is unlikely to As You Like It, it may clean-up before being eliminated in IE6 or necessary.
This is the web of nature, the clean-up a never-ending bugs.
Original Address: http://feed.yeeyan.com/articles/view/3407/10103