JavaScript 메모리 누수_javascript 기술에 대한 자세한 토론

1. 클로저란 무엇이며 클로저와 관련된 범위 체인은 여기서 논의되지 않습니다.

2. 자바스크립트 가비지 수집 메커니즘

JavaScript는 수동으로 메모리를 해제할 필요가 없으며 자동 가비지 수집 메커니즘(가비지 수집)을 사용합니다. 객체가 쓸모없을 때, 즉 프로그램의 어떤 변수도 객체를 참조하지 않을 때, 그 변수는 메모리에서 해제됩니다.

코드 복사 코드는 다음과 같습니다.

var s = [1, 2,3];
var s = null;
//이 방법으로 원래 배열 [1,2,3]이 해제됩니다.

3. 순환 참조

세 개의 객체 A, B, C

AàBàC: A의 특정 속성이 B를 참조하고 C도 B의 속성으로 참조됩니다. A가 지워지면 B와 C도 해제됩니다.

AàBàCàB: 여기에 B 객체를 참조하기 위해 C의 특정 속성이 추가됩니다. 이것이 A를 지우는 것이라면 B와 C 사이에 순환 참조가 생성되므로 B와 C는 해제되지 않습니다.

코드 복사 코드는 다음과 같습니다.

var a = {};
a.pro = { a:100 };
a.pro.pro = { b:100 };
a = null
//이 경우에는 {a:100}과 {b:100}도 동시에 해제됩니다.
~ var obj = {};
Obj.pro = { a : 100 };
Obj.pro.pro = { b : 200 };
var two = obj.pro.pro;
객체 = null
//이 경우 {b:200}은 해제되지 않지만, {a:100}은 해제됩니다.

4. 순환 참조 및 종결

코드 복사 코드는 다음과 같습니다.

함수 외부(){
var obj = {};
함수 내부(){
//obj 객체는 여기에서 참조됩니다
}
         obj.inner = 내부;
}

지극히 숨겨진 순환 참조입니다. external이 한 번 호출되면 그 안에 obj와 inner라는 두 개의 객체가 생성됩니다. obj의 내부 속성은 마찬가지로 inner를 참조합니다. 이는 obj가 여전히 innerFun의 폐쇄된 환경에 있기 때문입니다. 정확하게 말하면 이는 JavaScript의 고유한 "범위 체인" 때문입니다.

따라서 클로저는 순환 참조를 매우 쉽게 생성할 수 있습니다. 다행히도 JavaScript는 이러한 순환 참조를 매우 잘 처리할 수 있습니다.

5. IE에서 메모리 누수

IE에는 여러 유형의 메모리 누수가 있으며 여기에 자세한 설명이 있습니다(

http://msdn.microsoft.com/en-us/library/bb250448.aspx).

여기서는 그 중 순환 참조로 인한 메모리 누수에 대해서만 설명합니다. 이는 가장 일반적인 상황이기 때문입니다.

DOM 요소 또는 ActiveX 개체와 일반 JavaScript 개체 사이에 순환 참조가 있는 경우 IE에서는 이러한 변수를 해제하는 데 특별한 어려움이 있습니다. 이 버그는 IE에서 수정되었습니다. 7(

http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html).

“IE 6에서는 적어도 하나의 DOM 노드가 생성된 여러 객체 사이에 순환 참조가 발생할 때 메모리 누수가 발생했습니다. 이 문제는 IE 7에서 해결되었습니다.”

위의 예(4번 항목)에서 obj가 JavaScript Function 객체(내부)가 아닌 ActiveX 객체나 Dom 요소를 참조하는 경우 IE에서 형성된 순환 참조를 해제할 수 없습니다.

코드 복사 코드는 다음과 같습니다.

함수 초기화(){
        var elem = document.getElementByid( 'id' );
          elem.onclick = function(){
경고('레인맨');
//여기서는 elem 요소
를 참조합니다.         };
}

Elem은 클릭 이벤트 수신 기능을 참조하며 범위 체인을 통해 elem 요소를 다시 참조하기도 합니다. 이렇게 하면 IE에서 현재 페이지를 종료하더라도 이러한 순환 참조가 해제되지 않습니다.

6. 솔루션

기본 방법은 이 순환 참조를 수동으로 지우는 것입니다. 다음은 실제 애플리케이션에서 직접 addEvent() 함수를 빌드하고 창의 언로드 이벤트에서 모든 이벤트 바인딩을 지울 수 있는 방법입니다.

코드 복사 코드는 다음과 같습니다.

함수 외부(){
         var one = document.getElementById( 'one' );
         one.onclick = function(){};
}
​ window.onunload = function(){
         var one = document.getElementById( 'one' );
         one.onclick = null;
};

다른 방법(작성자: Douglas Crockford)

코드 복사 코드는 다음과 같습니다.

/**
* 요소 노드와 모든 하위 요소를 순회
*
* @param Elem node 지울 요소 노드
* @param function func 처리를 위한 함수
*
​*/
함수 walkTheDOM(노드, func) {
기능(노드)
노드 = node.firstChild
while(노드) {
         walkTheDOM(노드, func)
노드 = node.nextSibling
}
}
/**
* 메모리 누수를 방지하기 위해 DOM 노드에 대한 모든 참조를 지웁니다.
*
* @param Elem node 지울 요소 노드
*
​*/
함수 purgeEventHandlers(노드) {
walkTheDOM(노드, 함수 (e) {
for (var n in e) {                                     If (e[n] 유형 ===
                      '기능') {
                  e[n] = null;
            }
}
});

위 내용은 자바스크립트 메모리 누수 관련 내용과 해결방법입니다. 도움이 필요한 친구들은 참고하세요