Я унаследовал проект AngularJS, в котором явно есть утечка памяти. В производственной среде достаточно плохо вывести из строя браузер, если запущено достаточное количество экземпляров, что может произойти.
Я много читал о утечках в Javascript за последние пару дней, а также о подводных камнях в AngularJS. Я до сих пор не смог найти утечку, к сожалению. Делая то, что я мог бы сделать в C, я почти полностью запустил программу, чтобы посмотреть, течет ли она. Это очень мало, но это что-то.
Как показано в приведенном ниже коде, я бью конечную точку каждые 10 секунд ... и в основном просто считаю ключи в полезной нагрузке. Ничего фантастического. Я вырезал все сторонние модули, которые были в использовании. Единственное, что здесь должно быть, это Angular (1.5.8), jquery и bootstrap.
Я не очень разбираюсь в Google Dev Tools, но я сделал несколько вещей. 1, это диспетчер задач. Код ниже, кажется, течет около 1 Кб каждые несколько минут. («Живое» значение в столбце JavascriptMemory, кажется, увеличивается на 1 КБ даже после того, как я принудительно собираю мусор). Очевидно, что это неплохо, но как человек, чей основной недостаток не является внешним интерфейсом (или даже 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>