[JQUERY] 는 DOM 요소가 제거 된 경우, 그 청취자는 메모리에서 제거된다?

는 DOM 요소가 제거 된 경우, 그 청취자는 메모리에서 제거된다?

해결법

1. ---

   1.일반 자바 스크립트

   일반 자바 스크립트

   제거 된 DOM 요소 기준없이 (참조가 그것을 가리키는 없음) 다음 예이면 - 요소 자체는 가비지 컬렉터뿐만 아니라 이벤트 핸들러에 의해 픽업된다 / 청취자와 연관된.

   var a = document.createElement('div');
   var b = document.createElement('p');
   // Add event listeners to b etc...
   a.appendChild(b);
   a.removeChild(b);
   b = null; 
   // A reference to 'b' no longer exists 
   // Therefore the element and any event listeners attached to it are removed.
   

   하나; 여전히 말했다 요소를 가리키는 참조가있는 경우, 요소와 이벤트 리스너는 메모리에 유지됩니다.

   var a = document.createElement('div');
   var b = document.createElement('p'); 
   // Add event listeners to b etc...
   a.appendChild(b);
   a.removeChild(b); 
   // A reference to 'b' still exists 
   // Therefore the element and any associated event listeners are still retained.
   

   jQuery를

   jQuery를의 관련 방법 (예 : 삭제 등은 () () () 제거를 고려 예를 들어로 removeChild ()를 사용하여 작성되었습니다) 동일한 방식으로 작동한다고 가정하는 것이 공정 할 것이다.

   그러나 이것은 사실이 아니다; jQuery 라이브러리는 실제로) cleanData (라고 (문서화 및 이론에 언제든지 변경 될 수 있습니다) 내부 방법하는 자동 제거시 요소와 관련된 모든 데이터 / 이벤트를 정리 (여기에 무엇처럼이 방법의 모습입니다)이있다 DOM을에서 (을 통해이 일. 빈 제거 (), (), HTML을 ( "") 등).

   이전 버전의 브라우저 - IE의 특히 이전 버전은 - 때문에 그들이에 부착 된 요소에 대한 참조의 보류를 유지하는 이벤트 리스너에 메모리 누수 문제가 알려져있다.

   당신이 수정 기존 IE 버전 메모리 누수에 사용되는 원인, 패턴과 솔루션에 대한보다 깊이있는 설명을 원하는 경우에, 나는 완전히 당신이 이해하고 해결 인터넷 익스플로러 누출 패턴에이 MSDN 문서를 읽을 것을 권장합니다.

   이 관련된 몇 가지 더 많은 기사 :

   수동으로 리스너를 제거하는 것은 자신은 아마도 (이 경우 메모리가 응용 프로그램이 중요하며 경우에만 실제로 같은 브라우저를 대상으로하는)으로 얻을 수있는 좋은 습관이 될 것입니다.

2. ---

   2.jQuery를에 대하여 :

   jQuery를에 대하여 :

   참조 : http://api.jquery.com/remove/

   jQuery를 v1.8.2 .remove () 소스 코드 :

   remove: function( selector, keepData ) {
       var elem,
           i = 0;
   
       for ( ; (elem = this[i]) != null; i++ ) {
           if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {
               if ( !keepData && elem.nodeType === 1 ) {
                   jQuery.cleanData( elem.getElementsByTagName("*") );
                   jQuery.cleanData( [ elem ] );
               }
   
               if ( elem.parentNode ) {
                   elem.parentNode.removeChild( elem );
               }
           }
       }
   
       return this;
   }
   

   분명히 jQuery를)은 (node.removeChild를 사용

   이에 따라 : https://developer.mozilla.org/en-US/docs/DOM/Node.removeChild,

   제거 된 자식 노드는 여전히 메모리에 존재하지만 DOM의 더 이상 일부가 아닙니다. 당신은 oldChild를 객체 참조를 통해 나중에 코드에서 제거 된 노드를 다시 사용할 수 있습니다.

   즉, 이벤트 리스너가 제거 얻을 수도 있지만, 노드는 여전히 메모리에 존재한다.

3. ---

   3.폐쇄 및 이벤트 핸들러에 대한 참조를 유지하는 요소와 요소에 대한 참조를 유지하는 이벤트 핸들러에서 메모리 누수를 볼 수 힙을보고 주저하지 마십시오.

   폐쇄 및 이벤트 핸들러에 대한 참조를 유지하는 요소와 요소에 대한 참조를 유지하는 이벤트 핸들러에서 메모리 누수를 볼 수 힙을보고 주저하지 마십시오.

   가비지 컬렉터는 순환 참조 좋아하지 않는다.

   일반적인 메모리 누수 경우 : 객체는 요소에 대한 심판이 인정한다. 그 요소는 핸들러에 대한 심판이 있습니다. 그리고 핸들러는 객체에 대한 심판이 있습니다. 개체가 다른 개체의 많은에 대한 심판이 있습니다. 이 객체는 당신이 당신의 컬렉션을 unreferencing에 의해 버려진 있다고 생각 컬렉션의 일부였다. =>이 참조하는 모든 개체와 모든 페이지 출구까지 메모리에 유지됩니다. => 당신은 당신의 객체 클래스를위한 완벽한 살인 방법에 대해 생각하거나 예를 들어 MVC 프레임 워크를 신뢰해야합니다.

   또한, 크롬 개발 도구의 보유 트리 부분을 사용하는 것을 주저하지 않습니다.

4. ---

   4.그냥 다른 답변을 확장 ...

   그냥 다른 답변을 확장 ...

   위임 된 이벤트 핸들러 요소 제거시 제거되지 않습니다.

   $('body').on('click', '#someEl', function (event){
     console.log(event);
   });
   
   $('#someEL').remove(); // removing the element from DOM
   

   지금 확인 :

   $._data(document.body, 'events');
   

5. ---

   5.jQuery를 관해서는, 다음과 같은 일반적인 방법은 데이터 및 이벤트 핸들러와 같은 다른 구조를 제거한다 :

   jQuery를 관해서는, 다음과 같은 일반적인 방법은 데이터 및 이벤트 핸들러와 같은 다른 구조를 제거한다 :

   풀다()

   빈()

   HTML ()

6. ---

   6.예, 가비지 컬렉터뿐만 아니라 그들을 제거합니다. 항상하지만 기존 브라우저의 경우되지 않을 수 있습니다.

   예, 가비지 컬렉터뿐만 아니라 그들을 제거합니다. 항상하지만 기존 브라우저의 경우되지 않을 수 있습니다.

from https://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory by cc-by-sa and MIT license