JS 메모리 관리 예제 설명

JS에는 완전한 메모리 처리 메커니즘이 있으므로 이전에는 이를 구현하는 데 특별한 주의를 기울일 필요가 없었습니다. 페이지가 빠르지 않은 경우 새로 고치면 괜찮습니다. 브라우저가 멈춘 경우 다시 시작하면 문제가 없습니다. 그러나 SPA와 모바일 APP의 인기와 향후 PWA 구현 가능성으로 인해 JS 메모리는 새로운 메모리 병목 현상이 될 수 있습니다.

1. 메모리 누수란 무엇입니까

잘못된 인코딩으로 인해 일부 메모리를 더 이상 사용하지 않기로 결정하면 GC(Gabbage Collection)가 이러한 메모리를 올바르게 재활용하지 못하는데, 이는 메모리 누수입니다.

2. 메모리 점유, 할당 및 재활용

2.1 메모리 점유

객체가 차지하는 메모리는 직접 점유 메모리(Shallow Size)와 총 점유 메모리(Retained Size)로 구분됩니다. ) ).

메모리 직접 점유 : 객체 자체가 점유하는 메모리. 일반적인 JavaScript 개체에는 개체를 설명하고 직접 값을 저장하는 데 사용되는 메모리가 예약되어 있습니다. 일반적으로 배열과 문자열만 메모리를 직접적으로 많이 차지합니다(얕은 크기). 그러나 문자열과 배열은 종종 기본 데이터 부분을 렌더러 메모리에 저장하고 JavaScript 개체 스택에 작은 래퍼 개체만 노출합니다.
점유된 총 메모리: 직접 점유된 메모리와 이 참조에서 참조하는 종속 개체가 점유한 메모리입니다.

할당 및 새 작업에는 메모리 사용량이 포함됩니다.

2.2 메모리 할당

Chrome V8의 가비지 컬렉션(GC) 알고리즘은 Generational Collection을 기반으로 하며 메모리는 Young Generation(YG)과 Old Generation(OG)이라는 두 가지 유형으로 구분됩니다.

소위 젊은이와 노인은 그들이 차지하는 시간에 따라 나누어집니다. YG에서는 메모리 할당과 재활용이 빠르고 빈번하며 일반적으로 짧은 시간 동안만 존재하기 때문에 Young이라고 부르고, OG에서는 느리고 드물게 발생하기 때문에 Old라고 부릅니다.

V8에서는 YG의 GC 프로세스가 프로그램을 차단하지만 OG의 GC는 차단하지 않기 때문입니다. 그래서 보통 개발자들은 YG의 세부 사항에 더 관심을 갖습니다.

YG는 공간을 각각 From과 To라는 두 부분으로 나눕니다. 모든 메모리는 To 공간에서 할당됩니다. To가 가득 차면 GC가 시작됩니다.

어느 시점에서 To는 A, B, C에 메모리를 할당했습니다. 현재는 할당되지 않은 메모리가 조금 남아 있고 From의 메모리는 모두 비어 있습니다.

이때 프로그램은 D에 메모리를 할당해야 하는데, 아래와 같이 D에 필요한 메모리 크기가 To의 할당되지 않은 메모리를 초과합니다. 이때 GC가 발생하고 페이지 실행이 중지됩니다.

그런 다음 From과 To가 교체됩니다. 즉, 원래 To 공간은 From으로 표시되고 From은 To로 표시됩니다. 그리고 라이브 변수 값(예: B)이 표시되고 "가비지"(예: AC)가 표시되지 않으면 지워집니다.

라이브 B는 To 공간에 복사되고 "쓰레기" AC는 재활용됩니다. 동시에 D는 To 공간에 할당되며 최종적으로 배포는 아래와 같습니다.

그렇습니다. 전체 GC가 완료되고 이 과정에서 페이지 실행이 중지되므로 최대한 빨라야 합니다. YG의 값이 오랫동안 유지되면 OG로 푸시됩니다. OG의 공간이 가득 차면 OG의 GC가 YG의 GC를 트리거합니다.

• 각 할당은 To의 사용 가능한 공간을 줄이고 프로그램은 GC에 더 가깝습니다

• YG의 GC는 프로그램을 차단하므로 GC 시간은 10ms 이내로 너무 길어서는 안 됩니다. 16ms는 프레임 손실이 발생하므로 GC가 너무 자주 발생하면 안 됩니다.

• 특정 값이 가비지가 된 후에는 메모리가 즉시 해제되지 않으며 GC 중에 사용된 메모리만 재활용됩니다.

2.2 내용은 모두 참고자료에서 따왔습니다.

2.3 메모리 재활용

GC 루트는 메모리의 루트 노드이고, NodeJS에서는 루트 노드입니다. 글로벌.객체.

GC 루트에서 시작하여 그래프를 탐색합니다. 도달할 수 있는 모든 노드를 라이브 노드라고 합니다. GC 루트가 도달할 수 없는 노드가 있으면 해당 노드를 "가비지"라고 합니다. 회색 노드 그림과 같이 재활용됩니다.

루트 노드 재활용은 사용자가 통제할 수 없습니다.

3. 메모리 누수가 발생하는 이유

3.1 GC 루트에 대한 경로가 완전히 끊어지지 않았습니다

루트 노드에 대한 경로가 완전히 끊어지지 않았기 때문에 자동 GC에서는 이를 재활용하지 않습니다. 일부 메모리로 인해 메모리 누수가 발생합니다.

구체적인 이유는 다음과 같습니다.

• 객체 간의 상호 참조

<span style="font-size: 14px;">var a, b;<br>a.reference = b;<br>b.reference = a;<br></span>

• 전역 변수의 잘못된 사용

<span style="font-size: 14px;">a = "1234567";<br>相当于<br>window.a = "1234567";<br></span>

• DOM 요소가 지워지거나 삭제되면, 바인딩된 이벤트가 지워지지 않습니다

<span style="font-size: 14px;"><p id="myp"><br>    <input type="button" value="Click me" id="myBtn"><br></p><br><br><script type="text/javascript"><br>    var btn = document.getElementById('myBtn');<br>    btn.onclick = function () {<br>        document.getElementById('myp').innerHTML = 'Processing...';<br>        /* 清除事件绑定 */<br>        // btn.onclick = null;<br>    };<br></script><br></span>

• Closure reference

<span style="font-size: 14px;">function bindEvent() {<br>    var obj = document.getElementById('xxx');<br><br>    obj.onclick = function () {<br>        /** 空函数*/<br>    };<br><br>    /** delete this reference */<br>    // obj = null;<br>}<br></span>

• DOM 요소가 지워지거나 삭제되면 하위 요소에 JS 참조가 있으므로 모든 상위 요소가 발생합니다. 삭제되지 않는 하위 요소

<span style="font-size: 14px;">// b是a的子dom节点, a是body的子节点<br>var aElement = document.getElementById("a");<br>var bElement = document.getElementById("b");<br>document.body.removeChild(aElement);<br>// aElement = null；<br>// bElement = null;<br></span>

3.2 과도하게 점유된 메모리 공간

은 다음과 같이 nodejs에서 더 많이 나타납니다.

• 통과됨 대형 배열

  <span style="font-size: 14px;">while(1) {<br>    // do sth<br>}<br></span>

관련 권장 사항:

• Linux의 메모리 관리에 대한 자세한 소개

PHP 메모리 관리의 가비지 수집 메커니즘에 대한 자세한 설명(그림)

JavaScript 메모리를 방지하는 방법 누수 및 메모리 관리 팁

위 내용은 JS 메모리 관리 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!