如何验证Angular OnPush变更检测策略的性能差异？

1. 高频无关更新场景对比 #

• 实现逻辑：
  • 父组件设置定时器，每秒更新一个非子组件输入的本地变量（比如count: number）。
  • 创建两个子组件：一个用默认变更检测，另一个添加changeDetection: ChangeDetectionStrategy.OnPush。
  • 在两个子组件的ngDoCheck钩子中添加计数器或日志，统计变更检测触发次数。
• 验证点：默认策略下子组件会随父组件每次更新触发检测，OnPush策略下仅在输入属性变化时触发，两者的触发次数会有数量级差异。
• 辅助工具：用Angular DevTools的Profiler录制操作，对比两次会话中变更检测的总耗时和组件遍历数量。

2. 大规模嵌套组件树批量更新 #

• 实现逻辑：
  • 构建3层嵌套组件结构（父→子→孙），每层包含100个组件，总计10000个组件实例。
  • 父组件触发一次数据更新：默认策略下会遍历所有组件检测；OnPush策略下仅更新输入属性引用变化的组件（需确保更新时返回新的对象/数组引用，而非修改原数据内部属性）。
• 验证点：用浏览器Performance工具录制更新操作，对比两次任务中Angular Change Detection阶段的总耗时，OnPush策略的耗时会显著低于默认策略。

3. 数据表格重渲染场景 #

• 实现逻辑：
  • 创建包含1000行数据的表格，每行对应一个子组件。
  • 执行排序、筛选操作：默认策略会检查所有行组件；OnPush策略仅更新数据引用变化的行组件（需确保排序/筛选后返回新数组）。
• 验证点：通过浏览器Performance工具查看重渲染的帧耗时，或手动统计操作完成的时间差，OnPush策略的响应速度会明显更快。

关键注意事项 #

• 确保OnPush组件的输入属性更新为不可变数据：每次更新需生成新的对象/数组（如使用[...arr]、arr.map()或Object.assign({}, obj)），避免修改原数据的内部属性导致OnPush未触发检测。
• 使用Angular DevTools时，需开启"Change Detection"面板，实时查看组件的检测状态和触发次数，对比两种策略的差异。

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