使用 Angular 指令在 IE 中增加总内存
Total memory increasing in IE with Angular Directive
目前我在 运行 我的 angular 代码在 IE 11 下遇到问题。由于 Angular 呈现嵌套的 ng-repeat 非常慢（即使使用一种方式绑定）我想到了使用指令来呈现其他 <td> 元素而不添加任何不必要的观察者的想法。
我做了一个 plunkr 来模拟我遇到的问题。指令代码如下：
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 服务加载的数据，并添加了一个过滤器，因为这就是我在现实世界中所拥有的。
在 IE 开发工具中，我在 REST 调用之前和之后创建了堆快照，据我所知，堆正在被正确清理。偶尔我会看到几个字节的差异 +/- 但是总内存一直在增加。
在我将 "track by" 子句添加到 ng-repeat 之后，情况有所改善，如果关键数据没有改变，内存就会停止增加。然后它可以非常愉快地进行轮询，如果来自服务器的数据没有改变，那么总内存不会增加。例如，在我的生产代码中，当您对列进行排序时，数据是新的，然后每次加载新数据时我开始看到大约 3MB 的增加。几个小时后，IE 达到 2GB 的限制，然后通常会崩溃。数据量很小 - 大约 30k，所以我不知道为什么会增加 3MB。
我还尝试在编译函数中重写此指令，并在前置函数中尝试将我的元素设置为 null 或写入 .html('') 以尝试清理，但都无济于事.此时一切似乎都指向 tdRenderer 指令。我什至尝试取出 $filter，但我不确定我还能做些什么来确保清理和释放所有内容。
我在 Chrome 或 FF 中没有看到相同的行为。仅 IE（Edge 也受影响）
如有任何建议，我们将不胜感激
IE11 和 Edge 一般存在内存泄漏问题：
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.
参考文献
目前我在 运行 我的 angular 代码在 IE 11 下遇到问题。由于 Angular 呈现嵌套的 ng-repeat 非常慢（即使使用一种方式绑定）我想到了使用指令来呈现其他 <td> 元素而不添加任何不必要的观察者的想法。
我做了一个 plunkr 来模拟我遇到的问题。指令代码如下： 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 服务加载的数据，并添加了一个过滤器，因为这就是我在现实世界中所拥有的。
在 IE 开发工具中，我在 REST 调用之前和之后创建了堆快照，据我所知，堆正在被正确清理。偶尔我会看到几个字节的差异 +/- 但是总内存一直在增加。
在我将 "track by" 子句添加到 ng-repeat 之后，情况有所改善，如果关键数据没有改变，内存就会停止增加。然后它可以非常愉快地进行轮询，如果来自服务器的数据没有改变，那么总内存不会增加。例如，在我的生产代码中，当您对列进行排序时，数据是新的，然后每次加载新数据时我开始看到大约 3MB 的增加。几个小时后，IE 达到 2GB 的限制，然后通常会崩溃。数据量很小 - 大约 30k，所以我不知道为什么会增加 3MB。
我还尝试在编译函数中重写此指令，并在前置函数中尝试将我的元素设置为 null 或写入 .html('') 以尝试清理，但都无济于事.此时一切似乎都指向 tdRenderer 指令。我什至尝试取出 $filter，但我不确定我还能做些什么来确保清理和释放所有内容。
我在 Chrome 或 FF 中没有看到相同的行为。仅 IE（Edge 也受影响）
如有任何建议，我们将不胜感激
IE11 和 Edge 一般存在内存泄漏问题：
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.
参考文献