angularjs内存消耗问题 [英] angularjs memory consumption issue

问题描述

最近，我有建立一个新的Web应用程序的尝试角来获得一个很好的了解机会，和思想。所以，是的，我的较新的的这个框架。

Recently I had the opportunity of building a new web application, and thought of trying out Angular to get a good understanding of it. So yeah, I'm fairly new to this framework.

理解框架的细微之处后，我发现它非常容易与工作。我的经历的一切已经好了，直到用户开始报告应用程序的完全laggy性能。

After understanding the nuances of the framework, I found it surprisingly easy to work with. Everything about my experience had been just great, until users started reporting the utterly laggy performance of the application.

该应用程序相当简单，它有2个屏幕。其中一个展示交易的列表，而另一个，用户可以添加/编辑协议信息这第二页是一个简单的表单期待用户输入的交易相关的信息。它看起来是这样的：

The application is fairly simple—it's got 2 screens. One which shows a list of deals, and another where users can add/edit deal information—this second page is a simple form expecting the user to enter deal related information. It looks like this:

概述的部分使用渲染 NG-重复。零售商名单有一些530项，而上榜品牌拥有大约400项。

The outlined sections are rendered using ng-repeat. The retailers list has some 530 entries whereas the brand list has about 400 entries.

位分析之后，我想通了，参观这个第二种形式将屏幕不断增加浏览器的内存占用。第一屏不具有任何这样的效果。我只是第一屏和第二屏形式之间切换，发现每到这个画面会得到加载时，内存消耗将由50-75 MB秒杀。最终，浏览器将只冻结。这里的内存配置文件的样子：

After a bit of profiling, I figured out that visiting this second form screen would keep on increasing the memory consumption of the browser. The first screen doesn't have any such effect. I simply toggled between the first screen and this second form screen, and found that every time this screen would get loaded, the memory consumption would spike by 50-75 MB. Eventually, the browser would just freeze up. Here's how the memory profile looks:

正如你可以看到，消费不断增加，而且也没有任何GC的迹象！在节点的每个扣球数和记忆痕迹对应于为第二形态，基于屏幕的访问。

As you can see, the consumption keeps going up, and there's no sign of any GC! Every spike in the node count and memory trace correspond to a visit to the second form-based screen.

现在我已经签出了一大堆各地角度和内存消耗的问题，但他们每个人提到， $范围任何的意见，也会遭到移除当一个新的视图负荷。在 DOM节点计数的肯定并不表示这样的事情对我来说：/

Now I have already checked out a whole lot of issues around angular and memory consumption, but each of them mentions that the $scope for any of the views will get removed when a new view loads. The DOM node count certainly doesn't indicate such a thing for me :/

我也碰到与 NG-重复的使用2要点：

I also came across 2 important points related to the usage of ng-repeat:

1. 避免 NG-重复指令中的任何功能调用。


2. 请不要有双向绑定使用 NG-模型 A NG-重复指令中。

1. Avoid invocation of any function within the ng-repeat directive.
2. Don't have a two-way binding using ng-model within a ng-repeat directive.

这两个我已经避免了第二个屏幕，然而，内存消耗正在经历的屋顶。

Both of these I've avoided in the second screen, and yet, the memory consumption is going through the roof.

我的问题看起来是的另一个的内存相关的问题w.r.t角，但我真的试图让一些在这个封闭的，并没有发现之一。

My question might seem to be yet another memory related question w.r.t angular, but I've really tried to get some sort of closure on this and haven't found one.

真的AP preciate这个任何帮助，因为我的决定具有角门户其余部分的使用情况，以取得进展取决于解决这一问题。

Would really appreciate any assistance on this, as my decision to progress with the usage of angular for the rest of the portal hinges on solving this issue.

感谢您阅读！

根据宜兰的建议，让我补充一点，我利用两个插件渲染的下拉和实施日期选择器。

Based on Ilan's suggestion, let me add that I make use of 2 plugins for rendering the dropdown and the implementing the date-picker.

有关下拉，我使用引导选和日期选择器，我使用引导，日期选择器。

For the dropdown, i'm using Bootstrap-select and for the date-picker, I'm using Bootstrap-datepicker.

有关引导选工作，我不得不写这开火 NG-重复的 $最后事件广播的自定义指令。它看起来是这样的：

For bootstrap-select to work, I had to write a custom directive which fired a broadcast on the $last event of ng-repeat. It looks something like this:

.directive('onFinishRender', function($timeout) {
    return {
        restrict : 'A',
            link : function(scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function() {
                        scope.$emit('ngRepeatFinished');
                     });
                 }
            }
      };
});

然后在控制，我靠这个事件调用渲染的下拉插件：

Then in the controller, I rely on this event to invoke the render for the dropdown plugin:

    $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
        $('#retailer').selectpicker('render');
    });

有关引导，日期选择器，我没有做这样一个复杂的事情，因为我只需要使用JS包装日期输入字段。

For the bootstrap-datepicker, I do not have to do such an elaborate thing, as I only need to wrap the date input field using JS.

关闭插件后，内存的消耗大大减少。然而，泄漏的问题仍然存在。此前，每当被越来越加载的表单视图，存储将由50-60 MB秒杀。关闭插件后，用钉鞋25-35 MB。但是，正如你可以看到下面的内存消耗不断堆积。

After turning off the plugins, the memory consumption reduces drastically. However, the problem of a leak still persists. Earlier, whenever the form view was getting loaded, the memory would spike by 50-60 MB. After turning off the plugins, it spikes by 25-35 MB. But as you can see below, the memory consumption keeps on piling up.

推荐答案

我最近花了日日夜夜找到类似的内存泄漏问题作为你的事。这是没有直接回答你的问题。你将不得不做了研究，但我可以给你一些指点找到泄漏。

I recently spent nights and days finding similar memory leaks as that of yours. These is no direct answer to your question. You will have to do the research but i can give you some pointers to finding the leak.

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


2. 时间轴是很好的弄清楚，有泄漏，但实际看到的泄露，使用分析器选项卡。它运行您采取堆快照一个GC每次和给你一个线索，如果您好转与否。


3. 如果您看到内存泄漏的MB比它从DOMElements到来。有了你提到泄漏的大小，我可以告诉你整个文档垂下，因为在你的页面的一个或两个组件都没有得到释放分离DOM元素，并还挂着如附件DOM。


4. 从第二个页面删除所有元素，并做开关​​，看看内存越来越大。如果是这样，第一页有泄漏，否则做同样的第二页​​。


5. 一旦你找到该网页有泄漏，从该页面中删除所有组件并逐个增加他们一见泄漏返回时。

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

Hope these steps help you in some way. Also i have found that using $timeout in directive can cause leaks just in case it helps.

这篇关于angularjs内存消耗问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！