JavaScript 메모리 누수 및 메모리 관리 기술을 방지하는 방법

伊谢尔伦
풀어 주다: 2016-11-23 10:24:15
원래의
937명이 탐색했습니다.

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

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

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

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

1) 개체 속성을 삭제하면 개체 속도가 느려집니다(메모리 비용이 15배 더 많이 소요됨)

var o = { x: 'y' };
delete o.x; //此时o会成一个慢对象
o.x; //
 
var o = { x: 'y' };
o = null;  //应该这样
로그인 후 복사

2) 클로저

클로저 외부의 변수가 클로저 내부에 유입되면 클로저 종료 시 객체를 가비지 컬렉션(GC)할 수 없습니다.

var a = function() {
  var largeStr = new Array(1000000).join('x');
  return function() {
    return 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);
 
//#tree不能被回收入,因为treeRef还在
//解决方法:
treeRef = null;
 
//tree还不能被回收,因为叶子结果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();
  //虽然你想回收但是timer还在
  buggyObject = null;
}
로그인 후 복사

5) 디버그 메모리

Chrome의 내장된 메모리 디버깅 도구를 사용하면 메모리 사용량과 메모리 누수를 쉽게 확인할 수 있습니다.

타임라인 -> 메모리에서 기록을 클릭하세요.

JavaScript 메모리 누수 및 메모리 관리 기술을 방지하는 방법

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!