angularjs内存消耗问题

最近我有机会构建一个新的Web应用程序，并想到尝试使用Angular对其有所了解。 所以是的，我对这个框架相当陌生。

在了解框架的细微差别之后，我发现与其合作非常容易。 在用户开始报告应用程序的完全缓慢表现之前，我所有的体验都非常棒。

该应用程序非常简单 - 它有2个屏幕。 一个显示交易列表，另一个显示交易信息 - 用户可以添加/编辑交易信息 - 第二个页面是一个简单的表单，希望用户输入交易相关信息。 它看起来像这样：

概述的部分使用ng-repeat呈现。 零售商名单约有530个条目，而品牌名单约有400个条目。

经过一番分析后，我发现访问这个第二个窗体屏幕会不断增加浏览器的内存消耗。 第一个屏幕没有任何这样的效果。 我只是简单地在第一个屏幕和第二个屏幕之间切换，并发现每次这个屏幕都会被加载，内存消耗会猛增50-75 MB。 最终，浏览器会冻结。 以下是内存配置文件的外观：

正如你所看到的，消费不断增加，并没有任何GC的迹象！ 节点计数和内存跟踪中的每个尖峰都对应于对第二个基于窗体的屏幕的访问。

现在我已经检查了大量关于角度和内存消耗的问题，但是他们中的每一个都提到，当新视图加载时，任何视图的$scope都会被删除。 DOM节点数目当然并不代表我这样的事情：/

我还遇到了与使用ng-repeat相关的两个重要问题：

避免调用ng-repeat指令中的任何函数。

在ng-repeat指令中没有使用ng-model的双向绑定。

我已经在第二个屏幕中避免了这两种情况，但内存消耗正在进入屋顶。

我的问题可能似乎是另一个与内存有关的问题，但我真的试图得到某种封闭，并没有找到一个。

我真的很感谢这方面的任何帮助，因为我决定在门户其他部分使用角度来解决这个问题。

谢谢阅读！

更新1

根据Ilan的建议，让我补充一点，我使用了2个插件来渲染下拉菜单并实现日期选择器。

对于下拉菜单，我使用Bootstrap-select和日期选择器，我使用的是Bootstrap-datepicker。

对于bootstrap-选择工作，我不得不写一个自定义指令，它在ng-repeat的$last事件上触发广播。 它看起来像这样：

.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来包装日期输入字段。

更新2

关闭插件后，内存消耗急剧下降。 但是，泄漏问题仍然存在。 早些时候，无论何时表单视图被加载，内存都会高达50-60 MB。 关闭插件后，它会激增25-35 MB。 但正如你在下面看到的，内存消耗不断增加。

---

我最近花了几天时间找到和你一样的内存泄漏。 这些不是你的问题的直接答案。 你将不得不做研究，但我可以给你一些指示找到泄漏。

调试泄漏时，除了开发人员工具栏之外，请不要在Chrome浏览器中使用任何其他插件。

时间轴很好地发现有泄漏，但实际上看到泄漏，使用分析器选项卡。 它每次使用堆快照时都会运行GC，如果改进或不改善，则会提供线索。

如果您发现MB中的内存泄漏比来自DOMElements的内存泄漏。 随着你提到的泄漏的大小，我可以告诉你，整个文档挂在分离的dom元素，因为你的页面中的一个或两个组件都没有获得释放，仍然作为附加dom挂起。

删除第二页中的所有元素，并执行切换以查看内存是否正在增加。 如果是这样，第一页有泄漏，否则与第二页相同。

一旦你找到哪个页面泄漏，从该页面中删除所有组件并逐个添加它们以查看泄漏何时返回。

希望这些步骤能以某种方式帮助你。 另外我发现在指令中使用$ timeout可能会导致泄漏，以防万一它有帮助。

链接地址: http://www.djcxy.com/p/18715.html

上一篇: angularjs memory consumption issue

下一篇: UnsatisfiedLinkError Android