JavaScript의 일반적인 메모리 누수

javascript 칼럼 튜토리얼에서는 일반적인 메모리 누수를 소개합니다.

• 머리말
• 1 소개
• 2 메모리 누수의 주요 원인
• 3 일반적인 메모리 누수
  • 3.1 전역 변수
  • 3.2 타이머
  • 3.3 다중 참조
  • 3.4 클로저
• 4 Chrome 메모리 분석 도구
• 정보

머리말

이 블로그를 읽기 전에 JavaScript 메모리 관리에 대한 지식이 필요할 수 있습니다:

• V8 가비지 컬렉션의 메모리 관리 및 JavaScript

1 소개

메모리 누수: 애플리케이션에 더 이상 필요하지 않으며 운영 체제나 여유 메모리 풀(Pool of Free Memory)로 반환되지 않는 메모리를 말합니다.

메모리 누수로 인해 발생할 수 있는 문제: 속도 저하, 지연, 높은 대기 시간.

2 메모리 누수의 주요 원인

JavaScript 메모리 누수의 주요 원인은 더 이상 필요하지 않은 일부 참조(원하지 않는 참조)입니다.

원치 않는 참조라고 불리는 것은 개발자에게 더 이상 필요하지 않은 일부 메모리가 있지만 어떤 이유로 이러한 메모리는 여전히 표시되어 활성 루트 트리에 남아 있습니다. 원치 않는 참조는 이러한 기억에 대한 참조를 나타냅니다. JavaScript의 맥락에서 원치 않는 참조는 더 이상 사용되지 않고 해제될 수 있는 일부 메모리를 가리키는 변수입니다.

3. 일반적인 메모리 누수 애플리케이션은 전체 수명 동안 가비지 수집되지 않습니다.

시나리오 1: JavaScript에서 선언되지 않은 변수를 참조하면 전역 환경에 새 변수가 생성됩니다.

function foo(arg) {    
bar = "this is a hidden global variable";
}

위 코드 문자열은 실제로 다음과 같습니다.

function foo(arg) {   
window.bar = "this is an explicit global variable";
}

bar 변수를 foo 함수 범위 내에서만 사용하려고 하는데 위 상황에서 bar가 실수로 전역 범위에서 생성된다고 가정해 보겠습니다. 메모리 누수가 발생합니다.

시나리오 2:

function foo() {    
this.variable = "potential accidental global";
}foo();

마찬가지로 bar 변수를 foo 함수 범위 내에서만 사용하기를 원하지만 foo 함수 내부의 이것이 전역 개체를 가리킨다는 것을 모르는 경우 다음과 같은 오류가 발생합니다. 메모리 누수. 권장사항:

실수로 전역 변수를 생성하지 마세요. 예를 들어 엄격 모드를 사용하면 이 섹션의 첫 번째 코드 부분에서 오류가 보고되고 전역 변수가 생성되지 않습니다.

전역 변수 생성을 줄입니다.

대량의 데이터를 저장하기 위해 전역 변수를 사용해야 하는 경우, 데이터 처리 후 반드시 null 또는 재할당을 해주세요.

3.2 Timer

2. 장면 예:

for (var i = 0; i < 100000; i++) 
{    
var buggyObject = {        
callAgain: function () {            
var ref = this;            
var val = setTimeout(function () 
{                
ref.callAgain();            
}, 10);        
}    
}    
buggyObject.callAgain();    
buggyObject = null;}

3.3 多处引用

多处引用（Multiple references）：当多个对象均引用同一对象时，但凡其中一个引用没有清除，都将导致被引用对象无法GC。

场景一：

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);    
// Much more logic}function removeButton() 
{    // The button is a direct child of body.    
document.body.removeChild(document.getElementById('button'));    
// At this point, we still have a reference to #button in the global    
// elements dictionary. In other words, the button element is still in    
// memory and cannot be collected by the GC.s}

在上面这种情况中，我们对#button的保持两个引用：一个在DOM树中，另一个在elements对象中。 如果将来决定回收#button，则需要使两个引用均不可访问。在上面的代码中，由于我们只清除了来自DOM树的引用，所以#button仍然存在内存中，而不会被GC。

场景二： 如果我们想要回收某个table，但我们保持着对这个table中某个单元格（cell）的引用，这个时候将导致整个table都保存在内存中，无法GC。

3.4 闭包

闭包(Closure)：闭包是一个函数，它可以访问那些定义在它的包围作用域（Enclosing Scope）里的变量，即使这个包围作用域已经结束。因此，闭包具有记忆周围环境（Context）的功能。

场景举例：

var newElem;function outer() 
{   
var someText = new Array(1000000);   
var elem = newElem;   
function inner() 
{       if (elem) return someText;  
 }   
 return function () {};
 }setInterval(function ()
  {   newElem = outer();}, 5);

在这个例子中，有两个闭包：一个是inner，另一个是匿名函数function () {}。其中，inner闭包引用了someText和elem，并且，inner永远也不会被调用。可是，我们需要注意：相同父作用域的闭包，他们能够共享context。 也就是说，在这个例子中，inner的someText和elem将和匿名函数function () {}共享。然而，这个匿名函数之后会被return返回，并且赋值给newElem。只要newElem还引用着这个匿名函数，那么，someText和elem就不会被GC。

同时，我们还要注意到，outer函数内部执行了var elem = newElem;，而这个newElem引用了上一次调用的outer返回的匿名函数。试想，第n次调用outer将保持着第n-1次调用的outer中的匿名函数，而这个匿名函数由保持着对elem的引用，进而保持着对n-2次的...因此，这将造成内存泄漏。

해결책: setInterval의 매개변수 1의 코드를 newElem = outer()();

로 변경하세요. 이 섹션에 대한 자세한 분석은 Material 1과 Material 2를 참조하세요.

4 Chrome 메모리 분석 도구

Chrome(최신 버전 86)에는 개발자 도구에 두 가지 메모리 분석 도구가 있습니다.

1. Performance

2. Me 머야

관련 무료 학습 권장사항: javascript(동영상)

위 내용은 JavaScript의 일반적인 메모리 누수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!