Total memory increasing in IE with Angular Directi

Question

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.

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);
                }
            };
        });

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.

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.

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.

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.

I am not seeing the same behavior in Chrome or FF. Just IE (Edge is also affected)

Any suggestions would be greatly appreciated

Answer 1

There is a memory leak in IE11 and Edge in general:

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.

References

• Memory leak in Edge and Internet Explorer 11 - Microsoft Edge Development

• Internet Explorer 11 process memory leak · Issue #13940 · emberjs/ember.js · GitHub

• IE 11 and Edge memory usage increases over time - SolarWinds Worldwide, LLC. Help and Support