이 기사에서는 JavaScript의 메모리 누출 및 메모리 관리 기술에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 방법은 다음과 같습니다.
이 기사의 내용은 2014 년 8 월 26 일 Google Webperf (London Webperf Group)에서 나온 것입니다.
일반적으로 효율적인 JavaScript 웹 응용 프로그램은 매끄럽고 빠르야합니다. 사용자와 상호 작용하는 모든 응용 프로그램은 메모리를 효율적으로 사용하는 방법을 고려해야합니다. 너무 많이 소비되면 페이지가 충돌하여 사용자가 다시로드해야하므로. 그리고 당신은 모퉁이에 숨어 울 수 있습니다.
자동 쓰레기 수집은 효과적인 메모리 관리, 특히 대규모의 장기적인 웹 응용 프로그램에서 대체되지 않습니다. 이 기사에서는 Chrome의 DevTools를 통해 메모리를 효과적으로 관리하는 방법을 보여줍니다.
메모리 누출, 빈번한 쓰레기 수집 일시 정지 및 전반적인 메모리 팽창과 같은 성능 문제를 해결하는 방법을 배우십시오.
Addy Osmani는 PPT에서 Chrome V8에서 메모리 누출을 유발할 수있는 많은 예를 보여줍니다.
1) 객체 속성을 삭제 하여이 객체를 늦추십시오 (15 배 더 메모리 소비)
var o = {x : 'y'}; ox 삭제; // 현재 O는 느린 물체가 될 것입니다. // var o = {x : 'y'}; o = null; //이게되어야합니다2) 폐쇄
폐쇄 외부에서 폐쇄에 변수를 도입 할 때,이 물체는 폐쇄가 끝나면 쓰레기를 수집 할 수 없습니다 (GC).
var a = function () {var largest = new Array (100000) .join ( 'x'); return function () {return largest; }} ();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가 여전히 있기 때문에 트리를 상환 할 수 없습니다. 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의 자체 메모리 디버깅 도구는 메모리 사용 및 메모리 누출을 쉽게 볼 수 있습니다.
타임 라인 -> 메모리에서 레코드를 클릭하십시오.
이 기사가 모든 사람의 학습 JavaScript 프로그래밍에 도움이되기를 바랍니다.