ng-repeat性能优化咨询：1300个watchers缩减方案

首先明确：1300个watchers确实会显著拖慢Angular的digest循环，尤其是你每3秒就更新一次数据的场景，优化是必要的，但完全不需要重构全部功能，几个针对性的调整就能解决问题，给你具体的建议：

1. 精准控制绑定类型，减少不必要的双向绑定 #

你提到bindonce没用，但其实可以区分静态数据和动态数据：

• 对于事件中不需要用户修改、也不会实时变化的字段（比如事件ID、创建时间、标题），用单向绑定（{{::event.property}}）替代双向绑定，这会让Angular只在第一次渲染时绑定，后续digest循环不再检查这些字段，直接减少大量watchers。
• 只有那些需要用户交互修改、或者会实时更新的字段（比如事件状态），才保留双向绑定。
• 另外，把track by $index改成track by event.id——用唯一标识追踪项，当插入新事件时，Angular不需要重新渲染所有列表项，只渲染新增的项，既减少DOM操作，也避免不必要的watchers创建/销毁。

2. 增量更新数据，避免全量替换数组 #

你现在直接用vm.eventData = Server.eventData替换整个数组，这会触发$watchCollection对整个数组的遍历检查，还会让ng-repeat重新处理所有项。改成增量更新：

// 假设你从服务器拿到新的事件数组newEvents
Server.getEventData().then(function(newEvents) {
  // 过滤出当前数组中没有的新事件
  var uniqueNewEvents = newEvents.filter(function(newEvent) {
    return !vm.eventData.some(function(existing) {
      return existing.id === newEvent.id;
    });
  });
  // 把新事件追加到现有数组，而不是替换
  vm.eventData.push.apply(vm.eventData, uniqueNewEvents);
});

这样$watchCollection只会检测到数组的新增项，指令只需要处理这些新事件，digest循环的开销会大幅降低。

3. 优化点击指令的依赖，避免监听整个数组 #

列表项的点击指令不需要依赖整个eventsData数组，直接把当前event对象作为参数传给指令即可：

<li id="listItem_{{::event.id}}" 
    ng-repeat="event in ::vm.eventData track by event.id"
    event-click="vm.handleEventClick(event)">
  <!-- 列表内容 -->
</li>

指令内部直接接收event参数，点击时直接操作这个对象，不需要从数组里查找，也就不需要在指令里监听整个数组，减少额外的watchers。

4. 开启生产模式，关闭调试信息 #

在生产环境中，添加以下配置关闭Angular的调试信息：

angular.module('yourApp').config(['$compileProvider', function($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

这会移除Angular为调试添加的额外绑定和watchers，对大量watchers的场景性能提升非常明显。

5. 虚拟滚动：从根源减少DOM和Watchers数量 #

如果1300个项同时渲染在DOM中，即使优化了watchers，DOM元素过多也会导致性能问题。可以实现虚拟滚动：只渲染当前可见区域的列表项（通常只有几十项），滚动时动态替换可见项的内容。这样DOM里只有几十项，watchers数量直接降到几十，性能会有质的飞跃。

你可以自己实现简单的虚拟滚动逻辑（监听滚动事件，计算可见范围，更新渲染的项），或者用成熟的AngularJS虚拟滚动组件。

总结下来，这些调整都是在现有功能逻辑上的优化，不需要彻底改变你的轮询、事件插入等核心流程，就能有效解决watchers过多的问题。

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