我继承了一个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>