如何使用angularjs-nvd3-directives避免内存泄漏

发布时间：2020-12-17 07:41:53 所属栏目：安全来源：网络整理

导读：我正在使用 angularjs-nvd3命令来渲染图表. 在使用Chrome Developer Tools检查后,我检测到与图表相关联的一些内存泄漏.当用户浏览包含图表的不同视图时,内存从未完全释放. 我已经在图形控制器上进行了一些清理： $scope.$on('$destroy',function() { d3.sele

我正在使用 angularjs-nvd3命令来渲染图表.

在使用Chrome Developer Tools检查后,我检测到与图表相关联的一些内存泄漏.当用户浏览包含图表的不同视图时,内存从未完全释放.

我已经在图形控制器上进行了一些清理：

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

并在路线更改事件：

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

当我从我的应用程序中删除图表时,内存使用总是返回到初始值.

用图表：

内部消除：

是否有其他方式释放由这些图表生成的内存？

jsfiddle来展示这个问题.

你可能会忘记删除窗口调整大小的监听器.

angularApp.run(function($rootScope) {
  $rootScope.$on('$routeChangeStart',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;
    }
  });
});

还可以尝试删除整个svg元素,但似乎不是最好的方法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!