Angular.js内存泄漏，当我要开始担心 [英] Angular.js memory leaks, when should I start worrying

问题描述

所以，我必须建立在嵌套状态，指令很多，数据表和材料的角度，很多这个相当大的应用程序。

So I have this rather large application built on angular, alot of nested states, alot of directives, data tables and stuff.

我们最近决定以切换到全屏单页，而不是有一些小的单一应用程序的部分（比如文章，人们，仪表板是每个小单页的应用程序previously），所以我就开始处理性能多一点。在Chrome中你没有注意到视觉上的事情，在Firefox在另一方面，我认为它随时间变得更慢。

We recently decided to switch to full single page, instead of having few small single apps sections(say articles, people, dashboard were each a small single page app previously), so I started dealing with performance a bit more. In chrome you don't visually notice a thing, on firefox on the other hand I THINK it becomes slower over time.

于是我开始有三个快照技术来看看是怎么回事。但我不能完全肯定它来做什么。

So I started with three snapshot technique to see what's up. But I'm not entirely sure what to make of it.

图片

IMAGE

• 快照大小的两倍大小每个快照（第一15MB，第二67MB，120MB 3），这是否意味着什么？


• 有红色的DOM，红色的div 4000的很多例如：

现在我觉得，那些红色的div，跨度和锚主要是我的错，我做了一些不那么平常的东西来呈现这些数据表，使用这个指令我做了，我也觉得有些堆对象是那些DOM元素的结果没有被正确删除。

Now I feel that those red divs, spans and anchors are mainly my fault, I'm doing some not-so-usual stuff to render those data tables, using this directive I made, and I also feel that some of heap objects are result of those dom elements not being removed properly.

这是什么表指令本质上是做

This is what the table directive essentially does

var rows = '<div class="row" ng-repeat="item in items">';

_.each(columns, function(column) {
   // pass cell as a string from $templateCache, instead of having <table-cell type="column.type"> which loaded correct templateUrl depending on what was passed via type attr
   var cellTemplate = $templateCache.get(column.type);
   rows += '<div class="column">' + cellTemplate  + '</div>';
});

rows += '</div>';

// el is from directive link function
el.html(rows);

$compile(el.contents())(scope);

之所以我都在做这个，因为当我尝试使用嵌套的 NG-重复的行和列＆LT;表胰岛β细胞与GT;对于细胞指令，花了太长的方式来呈现，即使只有6列和50列。

Reason why I'm doing this at all is because when I tried to use nested ng-repeat for rows and columns and <table-cell> directive for cells, it took way too long to render, even with only about 6 columns and 50 rows.

因此​​，我认为正在发生的是，让他们保持叠加起来，每次这个表指令负荷没有这个表里面的div的被正常删除。

So what I think is happening is that none of those divs inside this table gets removed properly so they keep stacking up everytime this table directive loads.

现在即使我处理这个分离DOM树..什么所有其他的东西，我怎么知道，我应该尝试和处理，而这是往常一样棱角并没有真正影响性能？

Now even if I deal with that detached dom tree.. what about all the other stuff, how do I know which I should try and deal with, and which are usual for angular and doesn't really affect the performance?

//在plunker编辑表指令 http://plnkr.co/edit/ 1fZi6mVn2jBIGF0Q2a40？p = preVIEW

// edit table directive on plunker http://plnkr.co/edit/1fZi6mVn2jBIGF0Q2a40?p=preview

推荐答案

泄漏实际上是由另一个造成的，完全无害寻找指令，该指令是在表格的标题使用，在做什么，但创造的之类的物品阵然后用NG-重复打印出来..和更糟的它不是由什么引起我这样做，指令内，但其 更换：真正的 ..上帝知道为什么，我会设法复制它plunker并在GitHub上的报告。

The leak was actually caused by another, completely harmless looking directive that was used in the header of the table and was doing nothing but creating array of "sort items" and then printing it using ng-repeat.. and what's worse it was not caused by anything I did inside that directive but by its replace: true.. god knows why, I shall try and reproduce it on plunker and report on github.

由于这是几乎不可能找到该应用程序的一部分只是通过看堆的报告导致它，我去和删除应用程序，但一个我怀疑其他部分是造成它，后来我发现这不是说一个，所以我去，并保持readding所有其他人。

Since it was almost impossible to find which part of the app was causing it just by looking at the heap report, I went on and deleted all other parts of the app but the one I suspected was causing it, then I found out it wasn't that one, so I went on and kept readding all others.

一旦我发现真正的问题的指示，我也一样，不停地删除其code的部分，直到有字面上里面什么都没有。

Once I found out the real problematic directive, I did the same, kept deleting parts of its code until there was literally nothing inside.

然后，很明显这是指令的一个选项，然后我发现了更换导致它。

Then it was obvious it was one of directive's options, then I found out replace was causing it.

这篇关于Angular.js内存泄漏，当我要开始担心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！