【发布时间】：2016-02-24 08:11:54
【问题描述】：
在应用程序的不同部分之间切换时，我们的 AngularJS 应用程序出现内存泄漏问题。我们一直在努力寻找根本原因。
我们的应用中有一个主控制器。该主控制器包含另一个子控制器。这个子控制器有两个部分。在任何时候，都会显示两个部分之一。第一部分有一些带有按钮的 html。单击此按钮时，它将切换到第二部分。我们使用 jquery 在 2 个不同的部分之间切换（我知道我们不应该混合使用 jquery 和 angularjs，但这很长：-()
现在第二部分有 ui-view。在这个 ui 视图中加载了另一个带有控制器的视图。此视图包含一个按钮（用于切换到第一部分）和另一个子 ui-view。子 ui-view 加载了控制器。它使用 ng-repeat 在 UI 中填充数组。
当我们从第一部分切换到第二部分时，我们调用 $state.go 来重新加载第二部分中的父子 ui-view。
每次使用 $state.go 加载第二部分时都会发生内存泄漏。
以下是与应用代码类似的示例代码。实际的应用程序要复杂得多。但是内存泄漏的情况可以用下面的代码来模拟。
这里是Plunker Link
<body ng-app="testApp">
<div ng-controller="MainCtrl">
<div ng-controller="SubCtrl">
<div id="Section1">
<h1> {{title}}</h1>
<button ng-click="SwitchToSection2()">Switch to Section 2</button>
</div>
<div id="Section2" style="display:none;">
<div ui-view="section2view"></div>
</div>
</div>
</div>
var app = angular.module('testApp', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("section2", {
views: {
'section2view': { templateUrl: 'section2-template.html' }
}
})
.state("section2.child", {
templateUrl: 'section2child-template.html',
params: { p1: "test" }
})
}]);
app.controller('MainCtrl', function($scope){
});
app.controller('SubCtrl', function($scope, $state){
$scope.title = "This is section 1";
$scope.SwitchToSection2 = function(){
$("#Section2").show();
$("#Section1").hide();
$state.go('section2.child', { p1: "test"}, { location: false, reload: true });
}
});
app.controller('Section2Controller', function($scope, $state){
$scope.SwitchToSection1 = function(){
$("#Section1").show();
$("#Section2").hide();
}
});
app.controller('Section2ChildCtrl', function($scope, $state){
$scope.itemArray = [];
for (var i = 0; i < 1000;i++) {
$scope.itemArray.push({
prop1: "Property 1",
prop2: "Property 2",
prop3: "Property 3",
});
}
});
内存泄漏
我正在使用 Chrome 开发人员时间线工具来识别泄漏。下面的屏幕截图是在 2 个部分之间切换大约 10 次后拍摄的。每次我转到第 2 节时，内存大小都会增加。内存不是GC。您还可以看到节点数逐渐增加。我还使用3 snapshot profile technique 来查找分离的节点以及保留它的内容。但它没有提供任何有用的信息，除了 angularjs 引用了 dom。
如果有人能指出正确的方向，那将是很大的帮助。对不起，很长的帖子。谢谢。
【问题讨论】：
标签： javascript jquery angularjs memory-leaks angular-ui-router