sourcetip

Angular 어플리케이션에서의 메모리 누전 저감/제거 방법

fileupload 2023. 2. 9. 22:26
반응형

Angular 어플리케이션에서의 메모리 누전 저감/제거 방법

나는 큰 것을 최적화하고 있다.Angular App그거를 발견해서Google DevTools문제를 발견하기에 매우 좋습니다.이제 막 배우기 시작했으니까DevTools메모리 누전에 대해 매우 혼란스럽습니다.

이전 페이지와 다른 페이지로 이동하면, 몇 번이고 프로파일 힙 스냅샷 사이즈가 증가하고 있기 때문에, GC에 의해서 클리닝 되지 않는 오브젝트가 있다고 생각하기 때문에, 조금 시간이 지나면 앱이 느려지는 것을 해결할 수 있는 방법이 있습니다.제발 도와주세요.

메모

DevTools를 사용하여 이해한 내용입니다.틀렸으면 정정해 주세요.다른 제안도 환영합니다.

지금까지 사용한 것

  1. AngularOnce 지시로 필요할 때마다 워치를 줄입니다.
  2. ng-repeat을 quick-ng-repeat으로 대체하는 QuickList 디렉티브.
  3. InView Directive는 뷰포트에 없는 DOM을 제거하도록 큰 목록을 처리합니다.
  4. ngInfiniteScroll 디렉티브로부터의 느린 로드 접근법.
  1. 메모리 누수를 피하기 위해 바인딩을 삭제합니다.범위 $destroy() 메서드를 사용합니다.

    주의:

    Angular에서 메모리 누수의 가장 가능성이 높은 원인은 지침에 사용되는 JQuery입니다.JQuery 플러그인을 사용하여 디렉티브에 이벤트 리스트너를 첨부하면 Angular가 DOM에 대한 참조를 삭제한 후에도 DOM에 대한 참조를 유지합니다.이것은 브라우저에 의해 가비지가 수집되지 않는다는 것을 의미합니다.즉, 메모리 내의 "Disached DOM 트리"를 의미합니다.

    지침에서 jQuery 이벤트의 바인딩을 해제하는 방법을 계속 사용합니다.$destory: 요소가 DOM에서 삭제되기 전에 DOM 바인딩을 청소하기 위해 사용할 수 있는 메서드.

     $scope.$on("$destroy",function() {
        $( window ).off( "resize.Viewport" );
     });    
    
  2. $destroy 이벤트에서 $timeout 타이머를 취소하는 것을 잊지 마십시오.JS

    $scope.$on("$destroy",function( event ) {
        $timeout.cancel( timer );
    });
    

언급URL : https://stackoverflow.com/questions/22397484/how-to-reduce-remove-memory-leaks-in-angular-application

반응형