Causes and solutions of IE8 memory leaks (memory keeps growing)_javascript skills

During recent development, I used scheduled partial updates on the page. As a result, everything was normal under IE6, 7 and Firefox. However, after a few hours under IE8, the browser crashed, indicating a memory overflow. I I thought it was a memory leak caused by poorly written code, but IE6 and 7 were normal. After some investigation, it turned out to be a bug in IE8.

Problem

In IE8, the memory occupied by generating specific Dom nodes will not be released, even if these nodes are deleted, the memory will not be released.

The node types of memory leaks include: form, button, input, select, textarea, a, img and objec

Most other node types will not be leaked, such as span, div, p, table, etc.

This problem only occurs in IE8 and does not occur in other browsers.

If the user presses F5, IE8 will refresh the page. First, it will unload window.top, which will release the memory. If the page is an iframe, unload this iframe and nothing will happen. It seems that the memory will be released only when window.top is unloaded.

Example

Example 1

Execute the following code, IE8 will leak memory.

function leak1() { 
var node = document.getElementById("TO_AREA"); 
node.innerHTML = "<img />"; 
node.innerHTML = ""; 
node = null; 
} 

Note:

* This example adds nodes, so it will leak.

* There is a div in with the id "TO_AREA".

* Just a reminder, there are no closures or circular references here.

Example 2

The following code does not use innerHTML, but it will still leak

function leak2() { 
var node = document.getElementById("FROM_AREA").cloneNode(true); 
node.id = "NEW_AREA"; 
document.body.appendChild(node); 
document.body.removeChild(node); 
node = null; 
}

Note:

* FROM_AREA is the id of the form, and there are no closures or circular references here.

Example 3

This is the simplest and most direct example:

function leak4() { 
var node = document.createElement("IMG"); 
document.body.appendChild(node); 
document.body.removeChild(node); 
}

Note:

* If span is used instead of img, there will be no leakage.

These examples only leak memory in IE8. I tested them on IE8 in Windows XP, Windows Vista, Windows Server 2008, Windows Server 2008 R2 and Windows 7, and used the IE7 compatibility mode and standards in IE8. Patterns, leaked in every case.

Test page

About leaks

Memory size grows over time, but this does not directly cause the browser to crash. There seems to be an upper limit on the memory used by the browser. It seems to limit the memory used by DHTML through some internal means.

After the memory reaches the upper limit, the browser will automatically handle it, such as popping up a dialog box showing insufficient memory.

After my own testing, I found that IFrame also has this problem (under IE8)

Supplement: iframe memory release

Ext core developer Jack's answer is that TabPanelItem will not do special processing for the elements customized to the tab when it is closed. This part of the work must be completed outside the control. On the other hand, relevant information states that IE has a bug in the recycling of iframe elements. Under normal circumstances, the src attribute value of the element should be modified to "abort:blank" and manually removed from the DOM tree, and then By setting the variable referencing it in the script to blank and calling CollectGarbage(), you can avoid memory leaks caused by the iframe not being properly recycled.

<script>
function clearRAM() {
var frame = document.getElementById("ifr_content");
frame.src = 'about:blank';
frame.contentWindow.document.write( '');//清空frame的内容
frame.contentWindow.document.clear();
frame.contentWindow.close(); //避免frame内存泄漏
if (navigator.userAgent.indexOf('MSIE') >= 0) {
if (CollectGarbage) {
CollectGarbage(); //IE 特有 释放内存
//删除原有标记
var tags = document.getElementById("ifrSet");
tags.removeChild(frame);
//添加frameset框架
var _frame = document.createElement('frame');
_frame.src = '';
_frame.name = 'content';
_frame.id = 'ifr_content';
tags.appendChild(_frame);
}
}
}
//主动释放 5秒一次
setInterval( function() {
if (navigator.userAgent.indexOf('MSIE') >= 0) {
if (CollectGarbage) {
//alert(1)
CollectGarbage(); //IE 特有 释放内存
}
}
}, 5000) 
</ script>