Angular 异步变更检测与 ChangeDetectionStrategy 性能优化-JavaScript中文网-JavaScript教程资源分享门户

Angular 异步变更检测与 ChangeDetectionStrategy 性能优化

在 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