面试题：Angular指令性能优化之中的变化检测机制

利用变化检测机制优化指令性能

控制检测频率：
- OnPush策略：对于输入属性不变且没有事件绑定的指令，使用ChangeDetectionStrategy.OnPush策略。Angular仅在以下情况触发变化检测：
  - 输入属性引用变化。
  - 指令或组件触发事件。
  - Observable对象（如@Input() observable$: Observable<any>）发出新值。
- 减少不必要的检测，因为OnPush策略下，当父组件变化检测运行时，若不满足上述条件，子组件不会进行变化检测，从而提升性能。
优化数据结构：
- 避免使用可变数据结构。例如，使用不可变数据（如使用Immutable.js库），这样在数据改变时不会改变引用，从而减少不必要的变化检测。如果使用数组，避免直接修改数组元素，而是创建新数组（如使用concat、filter等方法返回新数组），以确保只有真正的数据变化才触发检测。
事件处理优化：
- 减少事件绑定数量。过多的事件绑定会导致每次事件触发时都进行变化检测。例如，若某些事件在特定业务逻辑下并不需要频繁触发变化检测，可以考虑使用其他方式（如RxJS的Subject来管理状态变化）。
- 对于频繁触发的事件（如scroll、mousemove），可以使用DebounceTime或ThrottleTime操作符来减少变化检测频率。例如，使用RxJS的fromEvent结合debounceTime：
```
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

const scroll$ = fromEvent(window,'scroll').pipe(debounceTime(300));
scroll$.subscribe(() => {
  // 处理逻辑，这里触发变化检测频率降低
});
```

变化检测策略及区别

Default策略：
- 描述：这是Angular默认的变化检测策略。Angular会在每个事件循环周期（如用户交互、HTTP响应等）运行变化检测，从根组件开始，递归检查组件树中的所有组件和指令。
- 应用场景：适用于大多数场景，尤其是组件间数据关联紧密，数据变化频繁且需要及时反映在视图上的情况。例如，一个实时聊天应用，消息的发送和接收需要即时更新视图，使用默认策略可以确保数据的实时性。
OnPush策略：
- 描述：如上述优化部分所述，仅在特定条件下运行变化检测。它将组件标记为“独立”，只有在输入属性引用变化、事件触发或Observable发出新值时才触发变化检测。
- 应用场景：适用于纯展示型组件，其输入数据相对稳定，且不依赖父组件频繁变化的数据。例如，展示商品详情的组件，商品数据一旦加载完成很少改变，这种情况下使用OnPush策略可以显著提升性能。

面试题：Angular指令性能优化之中的变化检测机制

知识考点

面试题答案

利用变化检测机制优化指令性能

变化检测策略及区别