如何减少/消除Angular应用程序中的内存泄漏

时间:2014-03-14 06:10:49

标签: angularjs memory-leaks google-chrome-devtools

我正在优化我的大Angular App。正如我发现Google DevTools非常适合发现问题。当我刚开始学习DevTools时,我对内存泄漏感到非常困惑。

当我向后移动到我的应用程序中的不同页面时,配置文件堆快照大小一次又一次地增加,所以我认为有一些对象没有被GC清理,这就是为什么我的应用程序在一段时间之后变慢怎么解决这个问题。请帮忙。

注意

这是我使用DevTools所理解的,如果我错了,请纠正我。欢迎提出其他建议。

直到我使用的

  1. AngularOnce指令,以便在需要时减少监视。
  2. quick-ng-repeat替换ng-repeat的快速列表指令。
  3. InView指令,处理大型列表,因此我删除了不在视口中的DOM。
  4. 来自ngInfiniteScroll指令的延迟加载方法。

1 个答案:

答案 0 :(得分:37)

  1. 删除绑定以避免内存泄漏,使用范围 $destroy()方法。

    注意:

      

    Angular中最可能出现内存泄漏的罪魁祸首是JQuery中使用的   你的指令。如果在指令中附加事件监听器   使用JQuery插件,后者将保留对DOM的引用   甚至在Angular删除自己对DOM的引用之后,这意味着   它永远不会被浏览器垃圾收集,反过来   在你的记忆中意味着“分离的DOM树

    在你的指令中继续练习解除jQuery事件的绑定。 $ destory可用于在清除之前清除DOM绑定的方法 元素已从DOM中删除。

     $scope.$on("$destroy",function() {
        $( window ).off( "resize.Viewport" );
     });    
    
  2. 不要忘记在$ destroy事件中取消$ timeout定时器 AngularJS

    $scope.$on("$destroy",function( event ) {
        $timeout.cancel( timer );
    });