最近我有机会构建一个新的Web应用程序,并考虑尝试使用Angular来更好地理解它。所以,是的,我已经相当新这个框架了。
在了解了框架的细微差别之后,我发现它的使用起来非常简单。关于我的经验的一切都很棒,直到用户开始报告应用程序的完全滞后性能。
应用程序非常简单 - 它有2个屏幕。一个显示交易列表,另一个显示交易信息 - 用户可以添加/编辑交易信息 - 第二个页面是一个简单的表单,期望用户输入交易相关信息。它看起来像这样:
使用ng-repeat
呈现概述的部分。零售商列表有大约530个条目,而品牌列表有大约400个条目。
经过一些分析后,我发现访问第二个窗体屏幕会继续增加浏览器的内存消耗。第一个屏幕没有任何这样的效果。我只是在第一个屏幕和第二个窗体屏幕之间切换,发现每次加载这个屏幕时,内存消耗量会飙升50-75 MB。最终,浏览器会冻结。以下是内存配置文件的外观:
正如您所看到的,消费量持续上升,并且没有任何GC的迹象!节点计数和内存跟踪中的每个峰值都对应于访问第二个基于表单的屏幕。
现在我已经检查了很多关于角度和内存消耗的问题,但是他们每个人都提到在加载新视图时,任何视图的$scope
都会被删除。 DOM节点计数对我来说当然不能表明这样的事情:/
我还发现了与ng-repeat
的使用相关的两个要点:
ng-repeat
指令中调用任何函数。ng-model
指令中使用ng-repeat
进行双向绑定。 我在第二个屏幕上都避免了这两个问题,然而,内存消耗却在不断增加。
我的问题可能似乎是另一个内存相关的问题w.r.t angular,但我真的试图在此处获得某种关闭并且找不到它。
非常感谢对此的任何帮助,因为我决定在门户网站其余部分使用角度进展取决于解决此问题。
感谢阅读!
根据Ilan
的建议,让我补充一点,我使用2个插件来渲染下拉列表并实现日期选择器。
对于下拉列表,我使用Bootstrap-select,对于日期选择器,我使用Bootstrap-datepicker。
要使bootstrap-select正常工作,我必须编写一个自定义指令,该指令在$last
事件ng-repeat
上触发广播。它看起来像这样:
.directive('onFinishRender', function($timeout) {
return {
restrict : 'A',
link : function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('ngRepeatFinished');
});
}
}
};
});
然后在控制器中,我依靠这个事件来调用下拉插件的渲染:
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
$('#retailer').selectpicker('render');
});
对于bootstrap-datepicker,我不需要做这么精细的事情,因为我只需要使用JS包装日期输入字段。
关闭插件后,内存消耗急剧下降。但是,泄漏问题仍然存在。早些时候,每当表单视图加载时,内存将飙升50-60 MB。关闭插件后,它会飙升25-35 MB。但是正如你在下面看到的那样,内存消耗不断增加。
答案 0 :(得分:3)
我最近花了几天时间才发现与你的内存泄漏类似的内存泄漏。这些都不是你问题的直接答案。你将不得不做研究,但我可以给你一些指向找到泄漏的指示。
希望这些步骤能够以某种方式帮助您。另外我发现在指令中使用$ timeout会导致泄漏,以防它有所帮助。