Angular JS 单页应用程序中的神秘内存泄漏

Question

我非常绝望地来找你 - 现在已经为此工作了两天。

我们有一个使用 Angular JS 构建的单页应用程序。我们使用HTML5模式的$routeProvider来实现SPA路由。功能明智 - 一切都很好！

我们有一个全局控制器附加到 body 元素，header 中有一个控制器用于快速搜索功能，所有其他控制器都限定在一条路线范围内。控制器之间共享一些数据，例如 currentUser object 和包含用户所选语言的字符串值的 ViewRes object。

但是，我们注意到 Chrome 服务为我们的页面占用了过多的 RAM。我使用 Chrome 配置文件工具来查看发生了什么。我禁用了大部分使用复杂指令的代码，只留下了基础知识。内存消耗降低了很多，但仍然很明显。每当我更改页面时，内存都会增加。

在堆快照中，它显示大部分内存被（闭包）和（数组）占用。 Detached DOM 树也很大。请注意，这些快照包含我们应用程序的基本元素（header、页脚和轻量级内容）。如果我包括我们复杂的 UI 组件，那么内存会从 14MB 跳到 50MB 再到 140MB……等等。显然我们会注意这些指令，但我担心我们的问题是全球性的，而不仅仅是指令设计不当。

当我打开 (array) 元素时，我注意到其中有一堆具有浅尺寸和保留尺寸 6172。跟踪该 object 的范围总是会导致一些 ng 指令，例如 ngShow , ngIf...

从图中可以看出，树在 'cache in function()' 处结束。我们使用 Angular 1.3.6。

编辑：该项目还包括 jQuery。我们使用的是 jQuery 1.8.2，当我切换到 1.11.2 时，在简单页面（简单 ng-repeats 和简单模型）之间切换不会再导致内存泄漏（不再分离 DOM 元素）。

现在复杂的指令仍然给我太多分离的元素，所以我现在要处理这些，当我找出原因时，我会post这里的结果。

Answer 1

很难说出您的具体问题是什么，但 Angular 中内存泄漏的常见位置包括 $interval、$watches 和事件处理程序。这些函数中的每一个都会创建一个不会被清理的闭包，除非您在控制器拆卸时明确删除它。

$interval 特别令人讨厌，因为它会继续运行直到您关闭浏览器或网页 - 即使用户移动到不同的选项卡或应用程序，它也不会停止运行宁！

如果您在这些闭包中创建对 DOM 元素的引用，您很快就会开始咀嚼内存，因为引用永远不会被释放，并且 DOM 树会随着用户从一页一页。

要解决此问题，请确保在控制器（以及指令的控制器或 link 函数）中处理 $destroy 事件，并在使用任何间隔、监视或事件处理程序后明确清理。

您可以通过持有对每个 $interval、watch 或事件处理程序的引用并简单地将其作为 $destroy 事件处理程序中的函数调用来实现。

例如：

// eventListener to remove
var eventListener = $scope.$on('eventName', function(){…});

// remove the eventListener when the $destroy event is fired
$scope.$on('$destroy', function(){
    // call the value returned from $scope.$on as a function to remove
    // the event listener
    eventListener();
}

// remove an event listener defined on a DOM node:
var elementEventListener = element.on('eventName', function(){…});

element.on('$destroy', function(){
    elementEventListener();
}

// Stop an interval
var stop = $interval(function(){...});
$scope.$on('$destroy', function(){
    stop();
}


// Finally, unbind a  $watch
var watchFn = $scope.$watch('someValue', function(newVal){…}

$scope.on('$destroy', function(){
     watchFn();
}

最后，永远不要在作用域中存储 DOM 个元素！（请参阅第 2 点 here 了解原因）。

Angular JS 单页应用程序中的神秘内存泄漏

Mysterious memory leaks in Angular JS Single Page Application

angularjs

performance

memory-leaks