JavaScript 변수 범위, 메모리, DOM 누출 및 기타 문제의 예에 대한 자세한 설명

伊谢尔伦
풀어 주다: 2017-07-18 10:31:52
원래의
1443명이 탐색했습니다.

Scope

변수가 함수 내에서 선언되지 않거나 var 없이 선언되면 전역 변수입니다. 창 개체의 모든 속성은 전역 범위를 갖습니다. 코드이며 함수 내부에서 선언됩니다. 그리고 var로 수정된 변수는 지역 변수이며 함수 본문 내에서만 사용할 수 있습니다. 함수의 매개변수는 var를 사용하지 않지만 여전히 지역 변수입니다.

블록 수준 범위 없음


// if语句:

<script type="text/javascript">
if(true){            //if语句的花括号没有作用域的功能。

var box = "trigkit4";
}
alert(box);//弹出 trigkit4
</script>
로그인 후 복사

for 루프 문에도 동일하게 적용됩니다.

변수 쿼리

변수 쿼리에서는 전역 변수보다 지역 변수에 접근하는 속도가 빠르므로 범위 체인을 검색할 필요가 없습니다.
다음 예:


<script type="text/javascript">
   var name = "Jack";
   function setName(){
      var name = "trigkit4";
      return name; //从底层向上搜索变量
  }
  alert(setName());   
</script>
로그인 후 복사

메모리 문제

javascript에는 자동 가비지 수집 메커니즘이 있습니다. 데이터가 더 이상 사용되지 않으면 "null"로 설정하여 참조를 해제할 수 있습니다

순환 참조

매우 간단한 예: DOM 개체는 Javascript 개체에 의해 참조되고 동시에 동일하거나 다른 Javascript 개체를 참조하는 경우 이 DOM 개체는 메모리 누수를 일으킬 수 있습니다. 이 DOM 개체에 대한 참조는 스크립트가 중지될 때 가비지 수집기에 의해 회수되지 않습니다. 참조 순환을 끊으려면 DOM 요소를 참조하는 객체나 DOM 객체에 대한 참조를 null로 할당해야 합니다.

Closure

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


var a = function() {
 var largeStr = new Array(1000000).join(&#39;x&#39;);
 return function() {
  return largeStr;
 }
}();
로그인 후 복사

DOM 누출

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


var select = document.querySelector;
var treeRef = select(&#39;#tree&#39;);
//在COM树中leafRef是treeFre的一个子结点
var leafRef = select(&#39;#leaf&#39;); 
var body = select(&#39;body&#39;);
body.removeChild(treeRef);
//#tree不能被回收入,因为treeRef还在
//解决方法:
treeRef = null;
//tree还不能被回收,因为叶子结果leafRef还在
leafRef = null;
//现在#tree可以被释放了。
로그인 후 복사

타이머 타이머 누수

타이머는 메모리 누수가 발생하는 일반적인 장소이기도 합니다.


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;
}
로그인 후 복사

메모리 디버깅

Chrome의 자체 메모리 디버깅 도구는 매우 편리할 수 있습니다. 메모리 사용량 및 메모리 확인 누출:
타임라인에서 기록 클릭 -> 메모리:

위 내용은 JavaScript 변수 범위, 메모리, DOM 누출 및 기타 문제의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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