JavaScript 메모리 누수를 쉽게 일으키는 여러 측면_javascript 팁

Google WebPerf(런던 WebPerf 그룹)에 게시됨, 2014년 8월 26일.

효율적인 JavaScript 웹 애플리케이션은 원활하고 빨라야 합니다. 사용자와 상호 작용하는 모든 애플리케이션은 메모리를 효율적으로 사용하는 방법을 고려해야 합니다. 메모리를 너무 많이 소모하면 페이지가 충돌하여 사용자가 다시 로드해야 하기 때문입니다. 그리고 구석에 숨어 울기만 하면 됩니다.

자동 가비지 수집은 특히 대규모 장기 실행 웹 애플리케이션에서 효과적인 메모리 관리를 대체할 수 없습니다. 이번 강의에서는 Chrome의 DevTools를 통해 메모리를 효과적으로 관리하는 방법을 보여드리겠습니다.

그리고 메모리 누수, 잦은 가비지 수집 일시 중지, 전반적인 메모리 팽창과 같은 성능 문제를 해결하는 방법을 알아보세요.

Addy Osmani는 자신의 PPT에서 Chrome V8의 메모리 누수에 대한 많은 예를 보여주었습니다.

1) 객체의 속성을 삭제하면 객체 속도가 느려집니다(15배의 메모리 소모)

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

var o = { x: 'y' };
delete o.x; //이때 o는 느린 객체가 됩니다
xx; //

var o = { x: 'y' };
o = null; //이렇게 되어야 합니다

2) 폐쇄

클로저 외부의 변수가 클로저에 도입되면 클로저가 종료될 때 객체를 가비지 수집(GC)할 수 없습니다.

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

var a = 함수() {
var LargeStr = new Array(1000000).join('x');
반환 함수() {
LargeStr;
반환 }
}();

3) DOM 유출

원본 COM이 제거되면 제거되지 않는 한 하위 노드 참조를 재활용할 수 없습니다.

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

var select = document.querySelector;
var treeRef = select('#tree');

//COM 트리에서 leafRef는 treeFre의 하위 노드입니다
var leafRef = select('#leaf')
var body = select('body');

body.removeChild(treeRef);

//#treeRef가 아직 존재하기 때문에 tree를 재활용할 수 없습니다
//해결책:
treeRef = null;

//리프 결과인 leafRef가 아직 존재하기 때문에 트리는 아직 재활용할 수 없습니다.
leafRef = null;

//이제 #트리를 공개할 수 있습니다.

4) 타이머 누출

타이머는 메모리 누수가 흔히 발생하는 장소이기도 합니다.

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

for (var i = 0; i var buggyObject = {
​ callAgain: function() {
var ref = this;
var val = setTimeout(function() {
ref.callAgain();
}, 90000);
}
}

buggyObject.callAgain();
//재활용하고 싶어도 타이머는 아직 남아있습니다
buggyObject = null;
}

5) 디버그 메모리

Chrome에 내장된 메모리 디버깅 도구를 사용하면 메모리 사용량과 메모리 누수를 쉽게 확인할 수 있습니다.
타임라인에서 기록 클릭 ->

자세한 내용은

원본 PPT를 확인해주세요.