Как уменьшить/удалить утечки памяти в приложении Angular

Я оптимизирую свой большой Angular App. Поскольку я нашел, что Google DevTools очень хорошо обнаруживает проблемы. Поскольку я только начал изучать DevTools, я очень смущен насчет утечек памяти.

Когда я перехожу назад и с разных страниц в моем приложении, размер снимка профиля кучи увеличивается снова и снова, поэтому я думаю, что есть какой-то объект, который не очищается GC, и почему мое приложение становится медленнее через какое-то время как это решить. Пожалуйста, помогите.

Примечание

Вот что я понимаю с помощью DevTools, пожалуйста, поправьте меня, если я ошибаюсь. Другие предложения приветствуются.

До сих пор то, что я использовал

  • AngularOnce для уменьшения количества часов при необходимости.
  • Директива QuickList для замены ng-repeat с quick-ng-repeat.
  • InView Директива, чтобы обрабатывать большой список, поэтому я удаляю DOM, который не находится в видовом экране.
  • Подход с ленивой загрузкой от ngInfiniteScroll.

Ответы

Ответ 1

  • Удалите привязки, чтобы избежать утечек памяти, Use Scopes $destroy() Метод.

    Примечание:

    Наиболее вероятным виновником утечки памяти в Angular является JQuery, используемый в ваши директивы. Если вы присоедините слушателя событий в своей директиве используя плагин JQuery, последний сохранит ссылку на ваш DOM даже после Angular удаляет свою собственную ссылку на DOM, что означает он никогда не будет мусором, собранным браузером, который, в свою очередь, означает " Отдельное дерево DOM" в вашей памяти

    В вашей Директиве продолжайте практиковать развязывание события jQuery. $ destory Метод, который может использоваться для очистки привязок DOM до элемент удаляется из DOM.

     $scope.$on("$destroy",function() {
    $( window ).off( "resize.Viewport" );
 });

  • Не забудьте отменить $таймаут таймеры в ваших $destroy событиях в AngularJS

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