AngularJS 是一个流行的前端类库，可用于构建单页应用程序（SPA）。但是，随着 AngularJS 应用程序的增长，其性能可能会受到影响。本文将介绍如何调优 AngularJS 单页应用程序，以提高性能。
1. 减少 $watch
AngularJS 中 $watch 是一个非常强大的功能，用于监视模型的变化并更新视图。但是，过多的 $watch 会拖慢应用程序的性能。因此，我们应该尽量减少 $watch 的数量。
1.1. 使用一次性绑定
AngularJS 1.3 添加了一次性绑定的功能， 可以避免那些不必要的 $watch，提升应用性能。要使用一次性绑定，只需将表达式用 :: 包裹即可：
<div>{{ ::name }}</div>1.2. 使用 ng-if 替代 ng-show
ng-show 实际上是隐藏了元素，而非删除它。这意味着即使元素不可见，AngularJS 仍在监听其变化。使用 ng-if 可以确保只有当条件满足时才渲染该元素。
<!-- ng-show -->
<div ng-show="showElement">{{ name }}</div>
<!-- ng-if -->
<div ng-if="showElement">{{ name }}</div>1.3. 避免使用 $watchCollection
$watchCollection 可以监视一个数组或对象的变化。但是，由于 $watchCollection 比 $watch 更耗时，因此我们应该尽可能避免使用它。
1.4. 避免使用深度监视
深度监视（deep watch）会监视整个对象的变化。因此，它比浅监视（shallow watch）更耗时。我们应该尽可能避免使用深度监视。可以使用 $watch('obj.prop') 代替 $watch('obj', callback, true)。
2. 减少 DOM 操作
DOM 操作可能是应用性能的瓶颈，特别是在 ng-repeat 等指令中。
2.1. 使用 track by
默认情况下，AngularJS 会对每个元素进行跟踪。使用 track by 可以确保 AngularJS 仅跟踪指定属性的变化。
<ul>
<li ng-repeat="item in items track by item.id">{{ item.name }}</li>
</ul>2.2. 手动更新 DOM
我们应该尽可能避免频繁更新 DOM。在某些情况下，手动更新 DOM 可以提高性能。例如，如果我们要在 ng-repeat 中添加多个元素，可以先将它们存储在数组中，然后将整个数组添加到 DOM 中。
-- -------------------- ---- ------- --- ----- - --- --- ---- --- -------- - ---------------------------------- ---------------------- -------------- - --- -- - ----------------------------- -------------- - ---------- ------------------------- --- ------------------------------------------------------
3. 使用 $http 缓存
在单页应用程序中，我们通常会使用 $http 服务从服务器获取数据。为了避免重复请求相同的数据，我们可以启用 $http 缓存。只需将 cache 参数设置为 true 即可：
$http.get(url, { cache: true });4. 使用性能分析工具
最后，我们应该使用性能分析工具来识别性能问题。AngularJS Batarang 是一个很好的工具，可以帮助我们分析应用程序的性能问题。Chrome 开发者工具也是一个强大的工具，提供了类似的功能。
总结
在开发 AngularJS 单页应用程序时，我们应该尽可能避免使用过多的 $watch 和 DOM 操作。使用一次性绑定、ng-if 和 track by 可以帮助我们减少不必要的 $watch。启用 $http 缓存和使用性能分析工具也可以帮助我们优化性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646031e0968c7c53b01f5370