是否有配置项可降低AngularJS 1.x的digest循环执行次数？

嘿，这个问题我太有共鸣了——不必要的Digest循环确实是AngularJS性能瓶颈的常见元凶，尤其是当你发现实际需求远低于当前触发频率的时候。下面分享几个我实践过的有效方案：

1. 清理冗余的$watch监听 #

Digest循环的核心工作就是遍历所有$watch并检查变化，所以减少无效/冗余的watch是最直接的优化：

• 优先用$watchCollection替代$watch监听数组或对象：$watch会深度遍历整个对象，而$watchCollection只监听第一层属性的变化，开销小很多。
• 及时销毁不再需要的watch：当控制器或指令销毁时，记得调用watch返回的注销函数，避免内存泄漏和无效的digest触发：

  const myWatcher = $scope.$watch('someVar', (newVal) => {
    // 监听逻辑
  });
  
  $scope.$on('$destroy', () => {
    myWatcher(); // 注销监听
  });
  

• 避免监听频繁变化的复杂对象：如果某个数据每秒变化多次但UI不需要实时响应，可以合并更新后再触发监听。

2. 手动控制Digest触发时机 #

别依赖框架自动触发的digest，而是按需手动触发，减少不必要的循环：

• 用$scope.$applyAsync()替代$scope.$apply()：前者会将多个更新操作合并到一个digest循环中，避免短时间内多次触发。比如批量更新数据时：

  // 批量修改数据
  $scope.data.item1 = newValue1;
  $scope.data.item2 = newValue2;
  // 合并触发一次digest
  $scope.$applyAsync();
  

• 对于非Angular原生的异步操作（比如原生setTimeout、第三方API回调），不要每次回调都触发digest，而是攒够更新后再手动调用$scope.$digest()。

3. 优化ng-repeat的性能开销 #

ng-repeat会为每个子元素创建多个watchers，如果列表很大，很容易导致digest频繁触发：

• 加上track by表达式：避免Angular重复创建DOM元素和watchers，比如：

  <div ng-repeat="item in items track by item.id">{{item.name}}</div>
  

• 如果列表数据几乎不变，考虑一次性渲染为静态HTML：比如用ng-if控制渲染，渲染完成后移除watch监听。

4. 限制异步操作的触发频率 #

像$http、$timeout这类Angular服务默认会在完成后触发digest，如果有频繁的请求或定时器，一定要限制它们的频率：

• 合并多个频繁的$http请求：比如用防抖（debounce）或节流（throttle）函数，减少请求次数，进而减少digest触发。
• 用原生setTimeout替代$timeout（如果不需要实时更新）：这样不会自动触发digest，等需要更新UI时再手动调用一次。

5. 排查第三方组件的隐性触发 #

很多第三方指令或组件（比如实时图表、轮播插件）可能会在内部频繁触发digest。你可以：

• 查看组件的配置项，是否有更新频率的设置，把它调整到符合需求的每秒2次。
• 如果组件没有提供配置，考虑替换成更轻量的替代方案，或者自己封装一层，控制digest的触发时机。

最后，建议你用AngularJS Batarang工具来分析当前的watchers数量和digest触发频率，定位具体是哪些操作导致了过高的循环次数，这样优化起来更有针对性！

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