带有Angular Directive的IE中的总内存增加 [英] Total memory increasing in IE with Angular Directive
问题描述
当前，在IE 11下运行我的角度代码时遇到问题.由于Angular渲染嵌套ng-repeat的速度非常慢(即使使用单向绑定)，所以我想到了使用指令进行渲染的想法.其他<td>元素，而无需添加任何不必要的观察者.
Currently I am experiencing an issue when running my angular code under IE 11. Due to Angular being incredibly slow to render a nested ng-repeat (even with one way bindings) I came up with the idea of using a directive to render the other <td> elements without adding any unnecessary watchers.
我做了一个笨拙的人来模拟我遇到的问题.指令代码如下: https://plnkr.co/edit/MNtShl6iWGFoXBHP2jmM?p=preview
I´ve made a plunkr to simulate the issue I am experiencing. Directive code below: https://plnkr.co/edit/MNtShl6iWGFoXBHP2jmM?p=preview
.directive('tdRenderer', function($compile, $filter) {
return {
restrict: 'A',
link: function(scope, element) {
var row = scope.row;
var htmlElements = '';
angular.forEach(row.rowData, function(column) {
var dataValue = $filter('typeFormatter')(column);
htmlElements += '<td class="nowrap" ng-click="dataTableController.rowClicked($index)">' + dataValue + '</td>';
});
htmlElements = $compile(htmlElements)(scope);
element.append(htmlElements);
}
};
});
我只是使用随机值来模拟通常通过REST服务加载的数据，并添加了一个过滤器，因为这是我在现实世界中所拥有的.
I´ve just used random values to simulate data that would normally be loaded via a REST service and added a filter as that is what I have in the real world.
在IE开发人员工具中，我在REST调用之前和之后创建了堆快照，从中可以看出堆已被正确清理.有时我会看到+/-几个字节的差异，但是总内存却一直在增加.
In IE dev tools I have created heap snapshots before and after the REST call and from what I can tell the heap is being cleaned up correctly. Occasionally I am seeing a few bytes difference +/- however total memory just keeps increasing.
在ng-repeat中添加了"track by"子句后，情况得到了改善，只要关键数据没有更改，内存就不再增加.然后，它可以非常愉快地进行轮询，并且如果来自服务器的数据没有更改，则总内存不会增加.在我的生产代码中，例如，当您对一列进行排序时，数据是新的，那么每次加载新数据时，我开始看到大约3MB的增长.几个小时后，IE达到2GB的限制，然后通常崩溃.数据量很小-大约30k，所以我不知道为什么它增加了3MB.
After I added the "track by" clause to the ng-repeat the situation improved in as far as that if the key data hadn´t changed then memory stopped increasing. It can then sit polling quite happily and if the data coming from the server hasn´t changed then total memory doesn´t increase. In my production code when you sort a column for example then the data is new and then I start seeing increases of about 3MB every time new data is loaded. After a few hours IE hits a 2GB limit and then usually crashes. The amount of data is fairly small - it is approximately 30k, so I have no idea why it is increasing by 3MB.
我还尝试在compile函数中重写此指令，并在pre函数中尝试将我的元素设置为null或编写.html('')来进行清理，但这两种方法均无济于事.此时，所有内容似乎都指向tdRenderer指令.我什至尝试取出$ filter，但是我不确定还能采取什么措施来确保清理并释放所有内容.
I have also tried rewriting this directive in the compile function and in the pre function tried setting my element to null or writing .html('') in an attempt to clean up, neither of which helps. At this point everything seems to point to the tdRenderer directive. I´ve even tried to take out the $filter but I am not sure what else I can do to ensure that everything is cleaned up and released.
我没有在Chrome或FF中看到相同的行为.只是IE(Edge也受到影响)
I am not seeing the same behavior in Chrome or FF. Just IE (Edge is also affected)
任何建议将不胜感激
推荐答案
通常IE11和Edge中存在内存泄漏:
There is a memory leak in IE11 and Edge in general:
请注意，在调试时，我注意到即使在诸如www.google.com之类的页面上，内存也总是会增长.因此，要验证该问题，我一直在使用系统监视器进行测试，并在那里查看该选项卡的ram使用情况.关闭选项卡将释放内存.
Note when debugging I noticed the memory will always grow even on a page such as www.google.com. So to verify the issue I have been testing with the system monitor and watching the ram usage there for the tab. Closing the tab will free the memory.
参考
Internet Explorer 11进程内存泄漏·问题#13940·emberjs/ember .js·GitHub
IE 11和EdgeWinds随时间增加Worldwide，LLC.帮助和支持
这篇关于带有Angular Directive的IE中的总内存增加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
