2014 년 8 월 26 일 Google Webperf (London Webperf Group)에 게시되었습니다.
효율적인 JavaScript 웹 응용 프로그램은 매끄럽고 빠르야합니다. 사용자와 상호 작용하는 모든 응용 프로그램은 메모리를 효율적으로 사용하는 방법을 고려해야합니다. 너무 많이 소비되면 페이지가 충돌하여 사용자가 다시로드해야하므로. 그리고 당신은 모퉁이에 숨어 울 수 있습니다.
자동 쓰레기 수집은 효과적인 메모리 관리, 특히 대규모의 장기적인 웹 응용 프로그램에서 대체되지 않습니다. 이 강의에서는 Chrome의 DevTools를 통해 메모리를 효과적으로 관리하는 방법을 보여줄 것입니다.
메모리 누출, 빈번한 쓰레기 수집 일시 정지 및 전반적인 메모리 팽창과 같은 성능 문제를 해결하는 방법을 배우십시오.
Addy Osmani는 PPT에서 Chrome V8에서 메모리 누출을 유발할 수있는 많은 예를 보여줍니다.
1) 객체 속성을 삭제 하여이 객체를 늦추십시오 (15 배 더 메모리 소비)
코드 사본은 다음과 같습니다.
var o = {x : 'y'};
황소 삭제; // 현재 O는 느린 객체가됩니다
황소; //
var o = {x : 'y'};
o = null; // 이렇게되어야합니다
2) 폐쇄
폐쇄 외부에서 폐쇄에 변수를 도입 할 때,이 물체는 폐쇄가 끝나면 쓰레기를 수집 할 수 없습니다 (GC).
코드 사본은 다음과 같습니다.
var a = function () {
var largestreps = new Array (10000000) .join ( 'x');
return function () {
반환 대단히;
}
} ();
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가 여전히 존재하기 때문에 트리를 상환 할 수 없습니다
//해결책:
treeref = null;
// 잎 결과가 여전히 존재하기 때문에 트리는 아직 재활용 할 수 없습니다.
Leafref = null;
// 이제 #tree를 해제 할 수 있습니다.
4) 타이머 계산 (결정) 타이머 누출
타이머는 메모리 누출이 발생하는 일반적인 장소입니다.
코드 사본은 다음과 같습니다.
for (var i = 0; i <90000; i ++) {
var buggyobject = {
Callagain : function () {
var ref = this;
var val = settimeout (function () {
ref.callagain ();
}, 90000);
}
}
BUGGYOBJECT.CALLAGAIN ();
// 재활용하고 싶지만 타이머가 여전히 있습니다.
버그 가관 = null;
}
5) 디버그 메모리
Chrome의 자체 메모리 디버깅 도구는 메모리 사용 및 메모리 누출을 쉽게 볼 수 있습니다.
타임 라인 -> 메모리에서 레코드를 클릭하십시오.
자세한 내용은 원래 ppt를 확인하십시오.