자바스크립트 메모리 누수의 원인은 무엇입니까?

JavaScript 메모리 누수의 원인: 1. 전역 변수의 부적절한 사용, 2. 부적절한 클로저 사용, 3. 지연 또는 타이머가 지워지지 않음(dom이 지워지거나 삭제될 때) 이벤트가 지워지지 않음).

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

메모리 누수란 브라우저 프로세스가 종료될 때까지 할당된 메모리 조각을 사용하거나 재활용할 수 없음을 의미합니다. 이는 부주의나 오류로 인해 프로그램이 더 이상 사용되지 않는 메모리를 해제하지 못함을 의미합니다. 메모리 누수는 메모리가 물리적으로 사라지는 것을 의미하는 것이 아니라 애플리케이션이 특정 메모리 세그먼트를 할당한 후 설계 오류로 인해 메모리 세그먼트를 해제하기 전에 메모리 세그먼트에 대한 제어권을 상실하여 메모리 세그먼트를 해제한다는 사실을 의미합니다. 메모리 낭비를 초래합니다. 메모리 누수의 일반적인 원인은 다음과 같습니다.

1. 전역 변수

JavaScript는 선언되지 않은 변수를 처리할 수 있습니다. 선언되지 않은 변수에 대한 참조는 전역 개체에 새 변수를 생성합니다. 브라우저의 맥락에서 전역 개체는 창입니다.

function foo(){
  name = '前端曰'；
}
// 其实是把name变量挂载在window对象上
function foo(){
  window.name = '前端曰'；
}

// 又或者
function foo(){
  this.name = '前端曰'；
}
foo() // 其实这里的this就是指向的window对象

이런 식으로 의도하지 않은 전역 변수가 생성되는 경우가 있습니다. 이 오류를 방지하려면 Javascript 파일 앞에 'use strict;'를 추가하세요. 이를 통해 예기치 않은 전역 변수를 방지하는 보다 엄격한 JavaScript 구문 분석 모드가 가능해집니다. 아니면 직접 변수 정의에 주의를 기울이세요!

2. 클로저

클로저: 익명 함수는 상위 범위의 변수에 액세스할 수 있습니다.

var names = (function(){  
    var name = 'js-say';
    return function(){
        console.log(name);
    }
})()

닫으면 객체 참조의 수명 주기가 현재 함수의 컨텍스트에서 분리됩니다. 클로저를 부적절하게 사용하면 교착 상태와 유사한 순환 참조(순환 참조)가 발생할 수 있습니다. 가비지가 있는 경우에도 발생 후에는 피할 수 없으며 해결할 수 없습니다. 재활용하면 여전히 메모리 누수가 발생합니다.

3. 잊혀진 지연기/타이머

우리는 일상생활에서 종종 setInterval/setTimeout을 시도하지만 사용 후 정리하는 것을 잊어버리는 경우가 많습니다.

var someResource = getData(); 
setInterval(function() { 
    var node = document.getElementById('Node'); 
    if(node) { 
        // 处理 node 和 someResource 
        node.innerHTML = JSON.stringify(someResource)); 
    } 
}, 1000);

setInterval/setTimeout의 이는 창 개체를 가리키므로 내부적으로 정의된 변수도 전역적으로 마운트됩니다. someResource 변수는 if에서 참조되며, setInterval/setTimeout이 지워지지 않으면 someResource가 유사하게 해제되지 않습니다. 실제로 setTimeout도 마찬가지입니다. 따라서 완료되면 ClearInterval/clearTimeout을 기억해야 합니다.

4. 정리되지 않은 DOM 요소 참조(dom이 지워지거나 삭제되면 이벤트가 지워지지 않습니다)

var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
};
function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
}
function removeButton() {
    document.body.removeChild(document.getElementById('button'));
    // 此时，仍旧存在一个全局的 #button 的引用
    // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。
}

[추천 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트 메모리 누수의 원인은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!