We are building a complex application that utilizes AngularJS for our Javascript and SPA framework, and using the Kendo UI controls for rich UI. Obviously, we are using the built-in AngularJS directives to render the Kendo components.
The problem is that we are encountering memory leaks when switching between views in the SPA, and these seem to be related to Kendo. The heap size keeps growing after every page that is navigated to, meaning that the components aren't being completely cleaned up when the view (and $scope) is being destroyed.
For example, if we start at page A, navigate to page B, and then back to A, we can see in Chrome's Memory Heap Profile that Kendo is leaving behind a Detached DOM Tree for components in page B (see http://i.imgur.com/S2BlbKT.png). If I drill down into one of these trees, you can clearly see that these are Kendo widgets which are being left behind because of javascript references which are left behind (see http://i.imgur.com/tQ96CAz.png).
Further, looking at the page HTML, we can see that for widgets such as the Combobox and DatePicker, Kendo is leaving behind "k-list-container" divs in the DOM which are accumulating at the bottom of the SPA's html and are not being removed when a view is being unloaded / $scope is being destroyed (see http://i.imgur.com/hJWxlAq.png).
We've tried manually calling kendo.destroy(angular.element('#container')) when the $scope is being destroyed, however this doesn't seem to help at all with getting rid of the extra DOM elements or with freeing up the Javascript references to the widgets.
Aren't the widgets, when used in conjunction with the AngularJS directives, supposed to automatically clean themselves up when the $scope is destroyed?If not, please let me know how we can effectively unload the widgets so that we don't have traces of them left behind when we navigate from page to page.
The problem is that we are encountering memory leaks when switching between views in the SPA, and these seem to be related to Kendo. The heap size keeps growing after every page that is navigated to, meaning that the components aren't being completely cleaned up when the view (and $scope) is being destroyed.
For example, if we start at page A, navigate to page B, and then back to A, we can see in Chrome's Memory Heap Profile that Kendo is leaving behind a Detached DOM Tree for components in page B (see http://i.imgur.com/S2BlbKT.png). If I drill down into one of these trees, you can clearly see that these are Kendo widgets which are being left behind because of javascript references which are left behind (see http://i.imgur.com/tQ96CAz.png).
Further, looking at the page HTML, we can see that for widgets such as the Combobox and DatePicker, Kendo is leaving behind "k-list-container" divs in the DOM which are accumulating at the bottom of the SPA's html and are not being removed when a view is being unloaded / $scope is being destroyed (see http://i.imgur.com/hJWxlAq.png).
We've tried manually calling kendo.destroy(angular.element('#container')) when the $scope is being destroyed, however this doesn't seem to help at all with getting rid of the extra DOM elements or with freeing up the Javascript references to the widgets.
Aren't the widgets, when used in conjunction with the AngularJS directives, supposed to automatically clean themselves up when the $scope is destroyed?If not, please let me know how we can effectively unload the widgets so that we don't have traces of them left behind when we navigate from page to page.
1 Answer, 1 is accepted
0
DaveJ
Top achievements
Rank 1
Rank 1
answered on 11 Feb 2015, 06:38 AM
Sorry, you can close this thread (didn't find any options to do it myself). We actually found that the memory leak was on our side.
On a related note - kendo.destroy() does not actually remove the DOM elements, including "popup" elements that are created at the end of the <body> for comboxes, datepickers, etc. Do these popup elements need to manually be removed?
On a related note - kendo.destroy() does not actually remove the DOM elements, including "popup" elements that are created at the end of the <body> for comboxes, datepickers, etc. Do these popup elements need to manually be removed?