AngularJS 1.5应用内存异常：每三次循环才触发垃圾回收问题排查

首先可以明确：这不是Chrome特性或正常浏览器行为，大概率是AngularJS 1.x的作用域、指令或监听器存在内存泄漏问题——毕竟你已经验证了纯HTML实现的内存行为完全正常，说明浏览器的GC机制本身没有问题，问题出在AngularJS的内部处理逻辑上。

下面我会结合你的测试场景，拆解可能的原因，并给出具体的排查和修复方向：

可能的核心原因 #

1. 嵌套ng-repeat的监听器残留
   你用到了两层嵌套的ng-repeat（行+列），AngularJS会为每个绑定的属性创建$watch监听器。当状态切换时，如果这些监听器没有被正确注销，就会持有作用域或DOM节点的引用，导致内存无法被GC回收。尤其是大量数据（300行×50列）的场景下，残留的监听器数量会非常可观。

2. 作用域未被正确销毁
   虽然ui-router默认会在状态切换时销毁旧状态的控制器和作用域，但如果存在第三方服务、自定义指令或全局对象持有了该作用域的引用（比如事件绑定没有解绑），作用域就会变成"detached"状态，无法被GC回收。

3. AngularJS 1.x的已知内存泄漏bug
   部分1.5.x的早期版本存在一些内存泄漏问题，尤其是在大量数据绑定和状态切换的场景下，比如ng-repeat的track by优化不足、$destroy事件触发不及时等。

具体排查步骤 #

1. 先验证GC的实际能力 #

在Chrome DevTools的Memory面板中，每次切换回状态1后，手动点击垃圾桶图标触发强制GC，观察内存是否能回到初始低位：

• 如果可以回到低位：说明是浏览器GC的时机问题，但结合纯HTML的正常表现，还是AngularJS残留了可回收的资源，只是GC没有及时触发；
• 如果无法回到低位：说明存在强引用导致的内存泄漏，需要进一步排查。

2. 确认控制器和作用域是否被销毁 #

在状态2的控制器中添加$destroy事件监听，验证控制器是否被正确销毁：

$scope.$on('$destroy', function() {
  console.log('状态2控制器已销毁');
  // 手动清空数据，帮助GC回收
  $scope.foodahoo = [];
});

如果控制台没有打印日志，说明ui-router没有正确触发销毁逻辑，需要检查你的状态配置是否有异常（比如是否设置了reloadOnSearch: false或其他阻止销毁的属性）。

3. 优化ng-repeat的绑定逻辑 #

AngularJS的ng-repeat如果没有指定track by，会创建额外的内部对象来跟踪重复项，容易导致残留。尝试修改模板：

<table>
  <tr ng-repeat="myobj in foodahoo track by $index">
    <td ng-repeat="(key, value) in myobj track by key">{{key}}: {{value}}</td>
  </tr>
</table>

添加track by后，再测试内存行为是否改善——这是解决ng-repeat内存问题的常用优化手段。

4. 用堆快照分析残留对象 #

在Chrome DevTools的Memory面板中，做三次堆快照：

1. 初始状态1的快照（标记为S1）；
2. 切换到状态2再切回状态1，触发强制GC后的快照（标记为S2）；
3. 重复切换3次后，触发强制GC的快照（标记为S3）。

对比这三个快照，重点查找：

• Detached Scope：已脱离DOM但仍被引用的作用域对象；
• Detached HTMLTableElement/HTMLTableCellElement：残留的DOM节点；
• $watchers：未被注销的监听器。

查看这些对象的引用链，就能找到是哪个对象（比如某个服务、指令或全局变量）在持有它们的引用。

5. 简化测试用例定位问题 #

• 先去掉内层的td循环，只保留外层的tr循环，测试内存行为；
• 如果内存恢复正常，说明问题出在嵌套ng-repeat的绑定上；
• 如果还是有泄漏，再减少数据量（比如把300改成30，50改成5），逐步排查是否是数据规模导致的监听器累积问题。

潜在的修复方向 #

1. 手动清理监听器和数据
   在控制器的$destroy事件中，不仅清空数据，还可以手动注销监听器（注意$$watchers是AngularJS内部属性，生产环境谨慎使用）：

   $scope.$on('$destroy', function() {
     // 清空数据
     $scope.foodahoo = [];
     // 手动注销所有监听器
     if ($scope.$$watchers) {
       $scope.$$watchers.forEach(function(watcher) {
         if (watcher.deregister) {
           watcher.deregister();
         }
       });
       $scope.$$watchers = [];
     }
   });
   

2. 升级AngularJS版本
   如果你的项目用的是1.5.x的早期版本（比如1.5.0~1.5.5），可以尝试升级到1.5.x的最新稳定版（如1.5.11），很多内存泄漏bug在后续版本中已经被修复。

3. 替换ng-repeat为原生渲染
   如果上述方法都无效，可以尝试用原生JS动态渲染表格（而非ng-repeat），在状态销毁时手动移除DOM节点，对比内存行为——这能彻底排除AngularJS指令的问题。

内容的提问来源于stack exchange，提问作者cis