在 Angular 应用中，监视器（watchers）是非常常见的工具。它们可以监听与页面相关的变化，例如：model 层的变化、用户的输入等等。Angular 内部使用了一个脏检查（dirty-checking）机制来监控这些变化，以便在需要时更新视图。但是，如果您不小心，监视器会成为应用性能的瓶颈。在本文中，我们将介绍如何识别和解决这些性能问题。
什么是监视器？
Angular 的监视器是指作为数据源的某个变量或表达式，它们将在每个 $digest 循环（dirty-checking）中被调用一次。即使变量没有改变，监视器也将被执行一次。如果您有许多监视器，您的应用程序的性能会受到影响，因为它们需要不断地被执行。
以下是一个基本的 Angular 控制器，它有两个监视器：
-- -------------------- ---- -------
----------------------- ---
--------------------- ---------------- -
----------- - -
----- ------
--
-------------------------- ---------- -
----------------- -----------
---
------------------------ -
------ --- -------
-- ---------- -
----------------- -----------
---
---在这个例子中，我们监视了 data.name 和当前时间（以毫秒为间隔）。每次上述监视器的一个回调函数被执行时，将记录日志消息。
监视器性能问题
主要有两个性能问题与监视器相关联：
1. 监视器数量
监视器的数量将直接影响性能。如果您有太多的监视器，则可能会导致页面变慢或卡顿，而且会增加页面的响应时间。
2. 监视器频率
监视器的频率是指每个监视器所要执行的次数。如果您的监视器执行的太频繁，则可能会给您的页面带来额外的负载。
需要注意的是，如果监视器是由其他监视器引起的循环引用，那么系统执行时会陷入死循环。
如何优化监视器性能？
以下是几种用于优化监视器性能的方法：
1. 减少监视器数量
首先，您需要确定哪些监视器是必不可少的。尽可能将非必要的监视器移除掉，以减少监视器的数量，并减少性能问题的可能性。
2. 使用 ng-if
您可以使用 ng-if 来只在需要时（比如当某个条件为真时）才创建/显示元素，从而减少监视器的数量。
例如，在以下的範例中，只有两个条件为真时（ng-if=“a==b” && c==d），才会创建元素：
<div ng-if="a==b && c==d">
...
</div>3. 取消监视器
您还可以取消不必要的监视器。例如，在以下示例中，它只在控制器被销毁时才会取消监视器：
-- -------------------- ---- -------
----------------------- ---
--------------------- ---------------- -
--- ----- - ------------------ -- -
--------------------- ---------
-- ------
---------------------- ---------- -
------------------------
---
---4. 使用 $timeout
使用 $timeout 而不是 $interval，因为 $timeout 只会在模型变化后运行一次，而 $interval 会在模型变化后每隔一段时间运行一次。
-- -------------------- ---- -------
----------------------- ---
--------------------- ---------------- --------- -
--- ----- - ----------------- -- -
-------------------- ---------
-- ------
---------------------- ---------- -
-----------------------
---
---5. 手动优化
手动优化是一个内在的组件，常常是优化循环的体现。一个很好的例子是在循环中使用一个虚拟滚动来展示大量数据。具体而言，在需要优化的区域建立虚拟滚动，不断地在屏幕上显示视图，而其他显示不可见的部分隐藏起来。
结论
监视器（watchers）是 Angular 应用程序的一项关键功能，但它们也可能导致性能问题。通过减少监视器数量、优化监视器频率以及手动优化等方法，我们可以更好地保护应用程序的性能。现在，您可以通过以上介绍，更好地对监视器的性能优化有深度和学习，并指导其实际应用实践中的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f52b0dc5c563ced56f132f