angularjs - 如何捕获 Angular 应用程序中的内存泄漏？

Question

我有一个用 AngularJS 编写的 Web 应用程序，它基本上将 API 轮询到两个端点。因此，它每分钟都会轮询以查看是否有任何新内容。

我发现它有一个小的内存泄漏，我已经尽力找到它，但我无法做到。在此过程中，我设法减少了应用程序的内存使用量，这非常棒。

在不做任何其他事情的情况下，每次民意调查都可以看到内存使用量激增(这是正常的)，然后它应该下降，但它总是在增加。我已将数组的清理从 [] 更改为 array.length = 0 并且我认为我确信引用不会持续存在，所以它不应该持续存在保留其中任何一项。

我也尝试过这个:https://github.com/angular/angular.js/issues/1522

但是没有任何运气......

因此，这是两个堆之间的比较:

大部分泄漏似乎来自(数组)，如果我打开，它是 API 调用解析返回的数组，但我确信它们没有被存储:

这基本上是结构:

poll: function(service) {
  var self = this;
  log('Polling for %s', service);

  this[service].get().then(function(response) {
    if (!response) {
      return;
    }

    var interval = response.headers ? (parseInt(response.headers('X-Poll-Interval'), 10) || 60) : 60;

    services[service].timeout = setTimeout(function(){
      $rootScope.$apply(function(){
        self.poll(service);
      });
    }, interval * 1000);

    services[service].lastRead = new Date();
    $rootScope.$broadcast('api.'+service, response.data);
  });
}

基本上，假设我有一个销售服务，那么这就是service变量的值。

然后，在主视图中:

$scope.$on('api.sellings', function(event, data) {
  $scope.sellings.length = 0;
  $scope.sellings = data;
});

并且 View 确实有一个ngRepeat，它可以根据需要呈现它。我花了很多时间试图自己解决这个问题，但我做不到。我知道这是一个难题，但是，有人知道如何追踪这个问题吗？

编辑 1 - 添加 Promise 展示:

这是makeRequest，它是两个服务使用的函数:

return $http(options).then(function(response) {
    if (response.data.message) {
      log('api.error', response.data);
    }

    if (response.data.message == 'Server Error') {    
      return $q.reject();
    }

    if (response.data.message == 'Bad credentials' || response.data.message == 'Maximum number of login attempts exceeded') {
      $rootScope.$broadcast('api.unauthorized');
      return $q.reject();
    }

    return response;
    }, function(response) {
    if (response.status == 401 || response.status == 403) {
      $rootScope.$broadcast('api.unauthorized');
    }
});

如果我注释掉 $scope.$on('api. sells') 部分，泄漏仍然存在，但会下降到 1%。

PS:我正在使用迄今为止最新的 Angular 版本

编辑 2 - 在图像中打开(数组)树

一切都是这样，所以它毫无用处:(

另外，这里有 4 个堆报告，您可以自己玩一下:

https://www.dropbox.com/s/ys3fxyewgdanw5c/Heap.zip

编辑3 - 回应@zeroflagL

编辑指令，对泄漏没有任何影响，尽管关闭部分似乎更好，因为它没有显示 jQuery 缓存内容？

该指令现在看起来像这样

var destroy = function(){
  if (cls){
    stopObserving();
    cls.destroy();
    cls = null;
  }
};

el.on('$destroy', destroy);
scope.$on('$destroy', destroy);

对我来说，发生的事情似乎发生在 (array) 部分。还有3 new heaps在两次投票之间。

Answer 1

答案是缓存。

我不知道那是什么，但这个东西会生长。好像和jQuery有关。也许是 jQuery 元素缓存。您是否有机会在每次服务调用后在一个或多个元素上应用 jQuery 插件？

更新

问题是 HTML 元素被添加，用 jQuery 处理(例如通过 popbox 插件)，但要么根本没有删除，要么没有用 jQuery 删除。在这种情况下进行处理意味着添加事件处理程序之类的东西。仅当 jQuery 知道元素已被删除时，缓存对象中的条目(无论其用途是什么)才会被删除。也就是说必须使用 jQuery 删除元素。

更新2

目前还不清楚为什么缓存中的这些条目没有被删除，因为 Angular 在包含它时应该使用 jQuery。但它们是通过评论中提到的插件添加的，并包含事件处理程序和数据。据我所知，Antonio 已更改插件代码以取消绑定(bind)事件处理程序并删除插件的 destroy() 方法中的数据。这最终消除了内存泄漏。