js 메모리 누수_javascript 기술의 여러 상황에 대한 자세한 토론

메모리 누수란 브라우저 프로세스가 종료될 때까지 할당된 메모리 조각을 사용하거나 재활용할 수 없음을 의미합니다. C에서는 메모리를 수동으로 관리하기 때문에 메모리 누수가 자주 발생합니다. 요즘 C#, Java 등 대중적인 언어는 자동 가비지 수집 방식을 사용하여 메모리를 관리하며, 일반적인 사용 시에는 메모리 누수가 거의 발생하지 않습니다. 브라우저도 자동 가비지 수집을 사용하여 메모리를 관리합니다. 그러나 브라우저의 가비지 수집 방법에 버그가 있어 메모리 누수가 발생할 수 있습니다.

1. 페이지의 요소가 제거되거나 교체될 때 해당 요소에 바인딩된 이벤트가 제거되지 않은 경우 IE는 이를 적절하게 처리하지 않으므로 먼저 이벤트를 수동으로 제거해야 합니다. 그렇지 않으면 메모리 누수가 발생합니다.

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

을 다음

으로 변경해야 합니다. 코드는 다음과 같습니다.

>

이벤트 위임

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

2.

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

var a=document.getElementById("#xx")

var b=document .getElementById("#xxx");
a.r=b ;

코드 복사 🎜> 코드는 다음과 같습니다. var a=document.getElementById("#xx") a.r=a; 순수한 ECMAScript 객체는 다른 객체가 객체 a와 b를 참조하지 않는 한 객체 a와 b를 참조하지 않는 한, 이는 서로에 대한 참조일 뿐이며 가비지 수집 시스템에서 계속 인식되고 처리됩니다. 그러나 Internet Explorer에서 순환 참조의 개체 중 DOM 노드나 ActiveX 개체가 있는 경우 가비지 수집 시스템은 이들 사이의 순환 관계가 시스템의 다른 개체와 격리되어 있음을 발견하지 못하고 해당 개체를 해제합니다. 결국 브라우저가 닫힐 때까지 메모리에 유지됩니다.

3.

코드 복사


코드는 다음과 같습니다.

var elem = document .getElementById( 'test'); elem.addEventListener('click', function() { alert('elem.tagName)을 클릭했습니다. }); 🎜>이 코드는 익명 함수를 DOM 노드의 클릭 이벤트 처리 함수로 등록합니다. DOM 개체 요소가 함수에서 참조되어 클로저를 형성합니다. 그러면 순환 참조가 생성됩니다. 즉, DOM-> Closure->DOM-> Closure... DOM 객체는 클로저가 해제되기 전에는 해제되지 않으며 클로저는 DOM의 이벤트 처리 기능으로 사용됩니다. 객체가 존재하므로 DOM 객체가 해제되기 전에는 클로저가 해제되지 않습니다. DOM 트리에서 DOM 객체가 삭제되더라도 이 순환 참조의 존재로 인해 DOM 객체도 클로저도 해제되지 않습니다. 이러한 메모리 누수를 방지하려면 다음 방법을 사용할 수 있습니다.

코드 복사


코드는 다음과 같습니다.

var elem = document.getElementById('test');
elem.addEventListener('click', function() {
alert('this.tagName)을 클릭했습니다. // 아니요 그런 다음 elem 변수
})

4.

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

function binEvent()
{
var obj=document.createElement("XXX")
obj.onclick=function(){
//빈 함수라도
}
}

클로저는 쉽게 순환 참조를 형성할 수 있습니다. 클로저를 형성하는 함수 객체가 DOM 노드에 대한 이벤트 핸들러에 할당되고 해당 노드에 대한 참조가 함수 객체 범위의 활성(또는 변경 가능) 객체에 할당되면 순환이 발생합니다. 참조.
DOM_Node.onevent -
이러한 순환 참조를 만드는 것은 쉬우며 유사한 순환 참조 코드(일반적으로 웹사이트의 모든 페이지에서 발견됨)가 포함된 웹사이트를 잠깐 탐색하는 것만으로도 많은(또는 전체) 리소스를 소비할 수 있습니다. 시스템의 메모리.
해결책은 이벤트 처리 기능을 외부에서 정의하고 클로저를 해제하는 것입니다

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

function binEvent()
{
var obj=document.createElement("XXX");
obj.onclick=onclickHandler
}
함수 onclickHandler (){
//뭔가를 하세요
}

또는 이벤트 처리 기능을 정의하는 외부 함수에서 dom에 대한 참조를 삭제하세요("The Definitive"에 소개된 주제에서 벗어남). JavaScript 안내", close 패키지 내에서 범위 내 사용되지 않는 속성을 삭제하여 메모리 소모를 줄일 수 있습니다. )

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

function binEvent()
{
var obj=document.createElement("XXX")
obj.onclick=function(){
//빈 함수라도
}
obj=null
}

5. >코드 복사

코드는 다음과 같습니다. a = {p: {x: 1}} b = a.p; a.p;

이 코드를 실행한 후에도 b.x의 값은 여전히 ​​1입니다. 삭제된 속성 참조가 여전히 존재하므로 일부 JavaScript 구현에서는 이러한 느슨한 코드로 인해 메모리 누수가 발생할 수 있습니다. 따라서 객체를 소멸시킬 때에는 속성을 순회하며 하나씩 삭제해야 합니다.
6. 자동 유형 박싱 변환
믿지 마세요. 다음 코드는 IE 시리즈에서 메모리 누수를 발생시킵니다

코드 복사

코드는 다음과 같습니다. var s="lalala"; alert(s.length)

자체는 문자열입니다. object 대신 길이 속성이 없으므로 length에 액세스할 때 JS 엔진은 자동으로 임시 String 개체를 생성하여 s를 캡슐화하며 이 개체는 확실히 유출됩니다. 이 버그는 놀랍지만 다행스럽게도 작업을 수행하기 전에 모든 값 유형을 명시적으로 변환해야 합니다.

코드 복사

코드는 다음과 같습니다. var s="lalala"; alert(new String(s).length)

7. 작업

IE 시리즈의 고유한 문제는 IE7의 DOM 트리에 없는 DOM 요소에 단순히 추가하는 것입니다. IE7은 메모리 누수를 개선하기 위해 DOM의 모든 요소를 ​​재활용하는 극단적인 솔루션을 채택하는 것 같습니다. 페이지를 떠날 때 다른 것은 신경쓰지 마세요.