在 Angular 应用中，Angular 的变更检测机制是一个非常重要的部分，它负责监控每一个组件的属性变更，再通过一系列机制将这些变更传递到其他子组件中。但是，这个机制也可能会导致一些性能问题，尤其是在组件层级比较深时。本文将介绍 Angular 的异步变更检测机制，并提供一些优化性能的技巧。
异步变更检测机制
Angular 中的变更检测机制是通过 ChangeDetectorRef 这个服务实现的。当一个组件的状态发生改变时，Angular 会自动调用这个组件的 change detection cycle，也就是变更检测周期。在检测周期中，Angular 会递归地检测每一个子组件的状态，直到所有子组件的状态都被检测完毕。
总的来说，Angular 的变更检测机制可以分为两种模式：同步模式和异步模式。在同步模式下，每次变更检测周期都是同步进行的，这意味着当一个组件的状态改变时，整个组件树都会被立即检测。而在异步模式下，Angular 会等到当前 JavaScript 运行栈为空时，再进行一轮检测。这种机制可以有效地降低变更检测机制带来的性能问题。
Angular 支持两种异步变更检测机制：NgZone 和 setTimeout。其中，NgZone 会监控浏览器的事件循环，并在事件循环结束时进行变更检测，而 setTimeout 则会延迟一段时间再进行检测。如果你需要在 Angular 中使用 setImmediate，则需要使用 ng-setImmdiate 这个 polyfill。
使用 NgZone 进行异步变更检测
使用 NgZone 可以很容易地实现异步变更检测。我们只需要将要进行异步检测的代码包装进 NgZone.runOutsideAngular() 方法中就可以了。这个方法会将我们的代码放在一个纯 JavaScript 环境中，使其脱离 Angular 的变更检测机制，避免性能问题。
下面是一个例子，演示了如何在 NgZone 中使用 setTimeout 方法进行异步变更检测：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- -----------
--------- --- -------- ---
--
------ ----- ------------ -
--------- -------
------------------- ----- ------- - -
--------- -
------------------------------ -- -
------------- -- -
---------------- -- -
------------- - ----- -----
---
-- ------
---
-
-在上面的代码中，我们首先调用了 NgZone.runOutsideAngular() 方法，然后在这个方法中调用了 setTimeout 方法。当 setTimeout 在 5 秒后触发时，我们利用了 NgZone.run() 方法重新将变更包含在 Angular 的变更检测机制中，这样就可以更新视图了。
值得一提的是，虽然 NgZone.run() 可以将变更重新包含在 Angular 的变更检测机制中，但是层级比较深的组件树依然可能会导致性能问题。如果你需要定时更新一个组件，而该组件层级比较深，那么你最好还是手动处理变更，避免不必要的性能损失。
使用 ChangeDetectionStrategy 进行性能优化
如果你的组件可能会被频繁地更新，那么除了使用异步变更检测机制外，你还可以通过使用 ChangeDetectionStrategy 进行性能优化。
Angular 提供了两种 ChangeDetectionStrategy，即 Default 和 OnPush。在 Default 模式下，每次变更检测周期都会检测这个组件下所有子组件的状态，而在 OnPush 模式下，只有当组件的输入属性发生变化时，才会进行变更检测。
在使用 OnPush 模式时，需要注意以下几个方面：
- 组件的输入属性必须是 immutable 的，不可以在组件内部改变。
- 当组件的输入属性改变时，需要调用 markForCheck() 这个方法来告知 Angular 进行变更检测。
下面是一个例子，演示了如何在组件新增时使用 OnPush 模式来优化性能：
-- -------------------- ---- -------
------ - ---------- ------- ----------------------- - ---- ----------------
------------
--------- -----------
--------- --- ---- ----
---------------- ------------------------------
--
------ ----- ------------- ---------- ------ -
----- -------
------------- --
---------- -
--------- - ----- -----
-
-在上面的代码中，我们使用了 OnPush 模式，并在组件新增时设置了一个 name 属性。由于我们使用了 OnPush 模式，Angular 只有在这个属性发生变化时才会进行变更检测。
在实际开发中，我们还可以使用 AOT 编译来进一步优化性能。AOT 编译会将模板编译成预先编译的 JavaScript 代码，这样可以提高 Angular 应用的性能。
总结
异步变更检测机制和 ChangeDetectionStrategy 性能优化是 Angular 中非常重要的一部分。在实际开发中，我们应该根据具体情况选择合适的异步变更检测机制，并尽可能地优化组件的变更检测机制，避免不必要的性能损失。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64969ff248841e98943d59c3