AngularJS内存泄漏,即使在基本代码中也是如此

时间:2018-05-03 19:25:12

标签: javascript angularjs google-chrome memory-leaks

我继承了一个AngularJS项目,该项目显然存在内存泄漏。在生产中,如果运行足够的实例,则可能会导致浏览器崩溃,这可能会发生。

我已经阅读了很多关于过去几天Javascript中的泄漏,以及AngularJS中的陷阱。不幸的是,我仍然无法找到泄漏。做我在C中可能做的事情,我把程序几乎没有任何东西,看看它是否还在泄漏。它很少,但它是一些东西。

如下面的代码所示,我每10秒点击一次端点......基本上只计算有效负载中的密钥。没有什么花哨。我已经删除了所有正在使用的第三方模块。唯一应该是Angular(1.5.8),jquery和bootstrap。

我并不精通Google Dev Tools,但我做了一些事情。 1,是任务管理器。下面的代码似乎每隔几分钟泄漏大约1k。 ("直播" JavascriptMemory列中的值似乎在我强制垃圾收集后上升1k)。显然不坏,但作为主要的schtick不是前端的人(甚至是Javascript),我不确定这是否是预期/可接受的。

其次,我拍了两个堆快照。 (对不起,代理人禁止我使用我所知道的任何图片主机)。我看到的主要内容是几分钟后,数组显示的大小增量为+1080。但是,我真的不知道自己在寻找什么。

可以想象,当我们在生产代码中添加回来时,泄漏变得更加明显......甚至对最终用户来说也是如此。

任何帮助(甚至一般)都表示赞赏。

leak_test.js

var app = angular.module('modal.editing', ['ngAnimate', 'ui.bootstrap'])
   .controller('MainCtrl', MainCtrl);

function MainCtrl ($scope, $http, $q, $timeout) {

  $scope.update_ms = 10000;

  $scope.handle_data = function(data) {
    console.log('Got ' + Object.keys(data).length + ' objects in handle_data()');
  };

  $scope.reload_entries = function() {
    var the_url = '/api/1/list';
    $http.get(the_url)
    .success(
      function (list) {
        $scope.handle_data(list.data);
        $timeout(function() { $scope.reload_entries(); }, $scope.update_ms);
      })
    .error(function volume_list_error_cb() {
      $scope.addAlert('Error: GET /api/1/list; Can\'t get current volume list!', 'danger');
      $timeout(function() { $scope.reload_entries(); }, $scope.update_ms);
      });
  };

  $scope.reload_entries();
}

为简单起见,这里是生成的HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Leak Test</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/jquery/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </head>
</html>
<body>
</body>
<script src="/angular/angular.js"></script>
<script src="/angular-animate/angular-animate.js"></script>
<script src="/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/angular-ui-grid/ui-bootstrap-tpls-0.12.1.min.js"></script>

<a href="recon_grid">Recon Grid</a>
<h1>DC Recon by Traded Volume Grid</h1>
<h3 class="blue" id="d8_header">Last Update: Thu May 03 2018 13:40:57 GMT-0500 (CDT)</h3>
<div class="volume_grid_container">
  <html ng-app="modal.editing">
  <script type="text/ng-template" id="alert.html">
    <div class="alert" role="alert">
      <div ng-transclude></div>
    </div>
  </script>

  <div alert ng-repeat="alert in alerts" ngMaxlength="3" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</div>
  <body ng-controller="MainCtrl as vm">
  </body>
  </html>
</div>
<script src="/javascripts/leak_test.js"></script>

0 个答案:

没有答案