Jak uniknąć wycieków pamięci za pomocą dyrektyw angularjs-nvd3

Question

Pracuję nad aplikacją angularjs, używając dyrektyw angularjs-nvd3 do renderowania wykresów.

Po sprawdzeniu w Narzędziach dla programistów w przeglądarce Chrome wykryłem wycieki pamięci powiązane z wykresami. Gdy użytkownik przegląda różne widoki zawierające wykresy, pamięć nigdy nie jest w pełni zwolniona.

ja już robi jakieś porządki na kontrolerach wykresy:

$scope.$on('$destroy', function() { 
    d3.select('#exampleId').remove(); 
    d3.select('#exampleId2').remove(); 
    ... 
}); 

A na razie routeChange:

myApp.run(function($rootScope, $templateCache) { 
    //try to clear unused objects to avoid huge memory usage 
    $rootScope.$on('$routeChangeStart', function(event, next, current) { 
    if (typeof(current) !== 'undefined'){ 
     //destroy all d3 svg graph 
     d3.selectAll('svg').remove(); 
     nv.charts = {}; 
     nv.graphs = []; 
     nv.logs = {}; 
    } 
    }); 
}); 

Kiedy usunąć wykresy z mojej aplikacji, wykorzystanie pamięci zawsze idzie z powrotem do wartości początkowej.

Z wykresu: whithout:

jest jakiś inny sposób, aby zwolnić pamięć generowanego przez te wykresy?

jsfiddle, aby zademonstrować problem.

Answer 1

Możesz zapomnieć o usunięciu słuchaczy zmiany rozmiaru okna.

angularApp.run(function($rootScope) { 
    $rootScope.$on('$routeChangeStart', function(event, next, current) { 
    if (typeof(current) !== 'undefined'){ 
     //destroy d3 stuff 
     window.nv.charts = {}; 
     window.nv.graphs = []; 
     window.nv.logs = {}; 

     // and remove listeers for onresize. 
     window.onresize = null; 
    } 
    }); 
}); 

Możesz również spróbować usunąć cały element svg, ale nie wydaje się to najlepszym sposobem.

Answer 2

zalecam przenieść swój wykres do własnych dyrektyw, które posiadają dyrektyw nvd3 na ich szablonów i słuchać o każdej dyrektywy dla zakresu.

$destroy również niszczy element tego wydarzenia.

Kontrolery powinny pobrać dane i przypisać je do dyrektywy.
Być może zechcesz posłuchać instrukcji $routeChangeStart w dyrektywie, więc czyszczenie zostanie obudowane na części korzystającej z danych. W ten sposób unikniesz powielania kodu.
Używam tych technik do czyszczenia moich dyrektyw, które używają modałów, więc nie mam zduplikowanych zdarzeń słuchaczy ani identyfikatorów.

Answer 3

Jest podobny problem na github: https://github.com/cmaurer/angularjs-nvd3-directives/issues/193

Jak wyjaśniono tam dodaje pracował lepiej:

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
angular.element(document.body.querySelectorAll('.nvd3')).remove(); 

To rozwiązuje przecieków pamięci SVG. Ale nadal istnieją pewne wycieki pamięci po stronie danych (Array).