IE8 메모리 누수 원인과 해결방법(메모리가 계속 늘어나네요)_javascript 기술

최근 개발 중에 페이지에서 예약된 부분 업데이트를 사용했기 때문에 IE6, 7 및 Firefox에서는 모든 것이 정상이었습니다. 그러나 IE8에서는 몇 시간 후에 브라우저가 충돌하여 메모리 오버플로가 발생했습니다. 잘못 작성된 코드로 인한 메모리 누수라고 생각했지만 IE6과 7에서는 조사한 결과 IE8의 버그로 밝혀졌습니다.

문제

IE8에서는 특정 Dom 노드를 생성하는 데 사용된 메모리가 해제되지 않으며, 해당 노드가 삭제되더라도 메모리는 해제되지 않습니다.

메모리 누수의 노드 유형에는 form, 버튼, 입력, 선택, 텍스트 영역, a, img 및 objec가 포함됩니다

span, div, p, table 등과 같은 대부분의 다른 노드 유형은 유출되지 않습니다.

이 문제는 IE8에서만 발생하며 다른 브라우저에서는 발생하지 않습니다.

사용자가 F5를 누르면 IE8은 페이지를 새로 고치고 먼저 window.top을 언로드하여 메모리를 해제합니다. 페이지가 iframe인 경우 이 iframe을 언로드하면 아무 일도 일어나지 않습니다. window.top이 언로드되어야 메모리가 해제되는 것 같습니다.

예

예시 1

다음 코드를 실행하면 IE8에서 메모리가 누출됩니다.

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

참고:

* 이 예시에서는 노드를 추가하므로 누출이 발생합니다.

* ID가 "TO_AREA"인 div가 있습니다.

* 참고로 여기에는 종결이나 순환 참조가 없습니다.

예시 2

다음 코드는 innerHTML을 사용하지 않지만 여전히 누출이 발생합니다.

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

참고:

* FROM_AREA는 양식의 ID이며 여기에는 클로저나 순환 참조가 없습니다.

예시 3

가장 간단하고 직접적인 예는 다음과 같습니다.

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

참고:

* img 대신 span을 사용하면 누출이 없습니다.

이 예제는 IE8에서만 메모리 누수를 발생시켰습니다. Windows XP, Windows Vista, Windows Server 2008, Windows Server 2008 R2 및 Windows 7의 IE8에서 테스트했으며 IE8에서 누출된 IE7 호환 모드 및 표준을 사용했습니다. 모든 경우.

테스트 페이지

유출에 대하여

시간이 지남에 따라 메모리 크기가 커지지만 이것이 브라우저 충돌을 직접적으로 일으키지는 않습니다. 브라우저에서 사용하는 메모리에는 상한선이 있는 것 같습니다. 일부 내부 수단을 통해 DHTML에서 사용하는 메모리를 제한하는 것 같습니다.

메모리가 상한에 도달하면 메모리 부족을 알리는 대화 상자를 팝업하는 등 브라우저가 자동으로 처리합니다.

직접 테스트한 결과 IFrame에도 이 문제가 있는 것으로 나타났습니다(IE8에서).

보충사항: iframe 메모리 출시

Ext 핵심 개발자 Jack의 대답은 TabPanelItem이 탭을 닫을 때 탭에 사용자 정의된 요소에 대해 특별한 처리를 수행하지 않는다는 것입니다. 작업의 이 부분은 제어 외부에서 완료되어야 합니다. 반면, 관련 정보에 따르면 IE에는 iframe 요소 재활용에 버그가 있습니다. 일반적인 상황에서는 해당 요소의 src 속성 값을 "abort:blank"로 수정한 후 DOM 트리에서 수동으로 제거해야 합니다. 스크립트에서 이를 참조하는 변수를 공백으로 설정하고 CollectGarbage()를 호출하면 iframe이 제대로 재활용되지 않아 발생하는 메모리 누수를 방지할 수 있습니다.

<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>