个人中心
gpt4 book ai didi

javascript - AngularJS 内存泄漏

转载 作者：行者123 更新时间：2023-11-28 10:50:52 27 4
gpt4 key购买 nike

在应用程序的不同部分之间切换时，我们的 AngularJS 应用程序遇到内存泄漏问题。我们一直在努力寻找根本原因。

我们的应用程序中有一个主 Controller 。该主 Controller 包含另一个子 Controller 。该子 Controller 有两个部分。任何时候，都会显示两个部分之一。第一部分有一些带有按钮的 html。单击此按钮时，它会切换到第二部分。我们使用 jquery 在两个不同的部分之间切换(我知道我们不应该混合 jquery 和 angularjs，但这是很长的故事:-( )

现在第二部分有ui-view。另一个带有 Controller 的 View 已加载到此 ui View 中。该 View 包含一个按钮(切换到第一部分)和另一个子ui-view。子 ui-view 加载了 Controller 。它使用 ng-repeat 来填充 UI 中的数组。

当我们从第一部分切换到第二部分时，我们调用 $state.go 来重新加载第二部分中的父子 ui-view。

每次使用 $state.go 加载第二部分时都会发生内存泄漏。

下面是与应用程序代码类似的示例代码。实际的应用程序要复杂得多。但是内存泄漏场景可以用下面的代码来模拟。

这里是Plunker Link 

<body ng-app="testApp">
<div ng-controller="MainCtrl">
  <div ng-controller="SubCtrl">
    <div id="Section1">
      <h1> {{title}}</h1>
      <button ng-click="SwitchToSection2()">Switch to Section 2</button>
    </div>
    <div id="Section2" style="display:none;">
      <div ui-view="section2view"></div>
    </div>
  </div>
</div>

 var app = angular.module('testApp', ['ui.router'])

    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state("section2", {
                views: {
                    'section2view': { templateUrl: 'section2-template.html' }
                    }
            })
            .state("section2.child", {
                 templateUrl: 'section2child-template.html',
                params: { p1: "test" }
            })

    }]);

    app.controller('MainCtrl', function($scope){


    });

    app.controller('SubCtrl', function($scope, $state){
          $scope.title = "This is section 1";
          $scope.SwitchToSection2 = function(){

            $("#Section2").show();
            $("#Section1").hide();
            $state.go('section2.child', { p1: "test"}, { location: false, reload: true });
          }

    });

    app.controller('Section2Controller', function($scope, $state){

          $scope.SwitchToSection1 = function(){

            $("#Section1").show();
            $("#Section2").hide();

          }

    });

    app.controller('Section2ChildCtrl', function($scope, $state){
          $scope.itemArray = [];

          for (var i = 0; i < 1000;i++) {
              $scope.itemArray.push({
                  prop1: "Property 1",
                  prop2: "Property 2",
                  prop3: "Property 3",
              });
          }

    });

内存泄漏

我正在使用 Chrome 开发者时间线工具来识别泄漏。下面的屏幕截图是在 2 个部分之间切换大约 10 次后拍摄的。每次我进入第 2 部分时，内存大小都会增加。内存不是GC。您还可以看到节点数逐渐增加。我还用过3 snapshot profile technique找到分离的节点以及保留它的内容。但除了 angularjs 引用 dom 之外，它没有提供任何有用的信息。

Memory Profiling using Chrome Developer Timeline

如果有人能指出正确的方向，那将会有很大的帮助。抱歉发了这么长的帖子。谢谢。

最佳答案

我无法使用 plunker 和您提供的说明来重现泄漏。我已经尝试了几次，但没有发现任何泄漏发生。

我已更改为:http://plnkr.co/edit/TtrbV9929H2ymaboFTNJ?p=preview这是这段代码:

var app = angular.module('testApp', ['ui.router']);

    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
      $stateProvider
          .state("section2", {
            views: {
              'section2view': { templateUrl: 'section2-template.html' }
            }
          })
          .state("section2.child", {
            templateUrl: 'section2child-template.html',
            params: { p1: "test" }
          })
    }]);

    app.controller('MainCtrl', function($scope){
      console.log('Main controller instantiated');
      $scope.$on('$destroy', function() {
        console.log('Main controller has been destroyed');
      });
    });

    app.controller('SubCtrl', function($scope, $state){
      console.log('Sub controller instantiated');
      $scope.$on('$destroy', function() {
        console.log('Sub controller has been destroyed');
      });
      $scope.title = "This is section 1";
      $scope.SwitchToSection2 = function(){
        $("#Section2").show();
        $("#Section1").hide();
        $state.go('section2.child', { p1: "test"}, { location: false, reload: true });
      }
    });

    app.controller('Section2Controller', function($scope, $state){
      console.log('Section2 controller instantiated');
      $scope.$on('$destroy', function() {
        console.log('Section2 controller has been destroyed');
      });
      $scope.SwitchToSection1 = function(){
        $("#Section1").show();
        $("#Section2").hide();
      }
    });

    app.controller('Section2ChildCtrl', function($scope, $state){
      $scope.itemArray = [];
      console.log($scope.itemArray.length);

      for (var i = 0; i < 1000; i++) {
        $scope.itemArray.push({
          prop1: "Property 1",
          prop2: "Property 2",
          prop3: "Property 3"
        });
      }

      console.log('Section2 Child Ctrl controller instantiated');
      $scope.$on('$destroy', function() {
        console.log('Section2 Child Ctrl controller has been destroyed');
      });
    });

因此，如果您切换，您可以看到 Controller 正在正确创建和销毁。迟到了，但正确。

我使用记录的分配来查看内存使用量是否随着时间的推移而增加。我像一个疯狂的疯子一样重复状态之间的变化，并且内存使用量不会随着时间的推移而增加:

enter image description here

现在，如果我们看到时间表:

enter image description here

你可以看到同样的事情。垃圾收集最终会启动，并且可能会产生一些开销，导致创建和销毁如此多的节点，但浏览器会自行恢复。

现在，如果您的应用程序中的情况有所不同，我只能认为是因为第 2 节 Controller 和子 Controller 在切换到第 1 节时不会死亡，并且因为您可能会将这些 Controller 中的内容存储到作用域链中，这可能是泄漏的东西。但这只是我的想象，因为我还没有看到代码。

值得一提的是，我在 OSX 10.11.1 上的最新 Chrome (46.0.2490.86) 中对此进行了测试，结果可能会因其他浏览器和/或操作系统而异，但如果是这种情况，罪魁祸首可能是浏览器本身。除了混合 jQuery 和 Angular(这本身很丑陋但并不坏)之外，我看不出任何可能导致所提供的代码发生泄漏的情况。

关于javascript - AngularJS 内存泄漏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33850413/

27 4 0
文章推荐： css - 将相对定位的 div 对齐到其他的底部
文章推荐： swift - 无论如何只能访问 child 字典的值(value)？
文章推荐： swift - 导航回 tableview View Controller 时更新 tableview 而不是整个重新加载
文章推荐： html - td html中的文本溢出
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com