在当今的单页面应用开发中，AngularJS 是最流行的前端框架之一。尽管 AngularJS 在创建高性能应用方面提供了大量的功能，但是在应用复杂度增加时，性能问题也会相应增加。为了提高应用的性能，下面给出了一些 AngularJS 单页面应用中的性能优化指南。
1. 使用 ng-cloak 隐藏 AngularJS 标签
AngularJS 会在应用初始化时尽可能快地解析 DOM 元素。对于含有 AngularJS 标签的元素，该元素显示在页面上的时间可能要长一些，因为需要等待 AngularJS 表达式计算完成。这些元素将会在页面加载完成后一小段时间内亮显于屏幕上，这样会给用户带来不好的交互体验。
为了避免这种情况，可以使用 ng-cloak 指令来隐藏具有 AngularJS 指令的元素，直到 AngularJS 指令被解析为止：
<div ng-cloak>
<p>{{ message }}</p>
</div>在元素上同时使用 ng-cloak 和 ng-bind 指令，则会在模板表达式解析完之后，才会将数据绑定到元素上：
<div ng-cloak ng-bind="message"></div>
2. 少用 ng-repeat
ng-repeat 是 AngularJS 提供的循环指令，它可以根据可迭代对象重复生成相应的 HTML 元素。因为 ng-repeat 会在每次加载时都执行一次，所以在循环次数很多的情况下，使用 ng-repeat 会导致性能问题。
为了减少每个 ng-repeat 指令的过渡生成，使用 limitTo 过滤器来限制一次性生成的元素数量：
<div ng-repeat="item in items | limitTo:10"></div>
另一种方式是使用 track by 指令来跟踪循环中的项：
<div ng-repeat="item in items track by $index"></div>
3. 避免使用 DOM 操作
在 AngularJS 应用程序中，操作 DOM 元素是一个耗时操作。每次操作都会导致整个视图的重新计算。为了优化性能，尽量避免直接操作 DOM 元素。
可以使用 $timeout 服务来在 $digest 循环后执行代码，这样可以确保视图已被更新：
angular.module('app', [])
.controller('MyCtrl', function($scope, $timeout) {
$timeout(function() {
// 操作 DOM 的代码
}, 0);
});4. 通过手动装逼减少 $digest 循环
默认情况下，在每个时间周期中，AngularJS 框架都会执行 $digest 循环以检测变化，并更新 DOM，但在每个周期中再重复执行 $digest 循环可能会耗费较多的性能。
通过手动装逼称为一种减少 $digest 循环次数的方法。在指定的事件或者钩子函数中，检测需要更新的变化，并手动解决 $digest 循环。例如：
-- -------------------- ---- -------
--------------------- ---
--------------------- ---------------- -
--------------------- ---------- -
-- ----------
---------------------------- -
-- -------
---
---
---5. 使用 AngularJS 内置的指令
在 AngularJS 内置指令中有一些指令可以用来优化应用性能，比如 ng-if、ng-switch 和 ng-show、ng-hide。通过使用这些指令，可以在显示元素时不影响应用性能。
例如可以通过 ng-if 指令在应用初始化时不渲染元素，直到条件成立时才渲染该元素：
<div ng-if="condition"> <!-- 后续操作 --> </div>
总结
以上就是一些 AngularJS 单页面应用中的性能优化指南，常用的包括使用 ng-cloak 指令隐藏 AngularJS 标签，尽量避免直接操作 DOM 元素，使用 $timeout 来确保在视图更新后操作 DOM 元素，手动装逼来减少 $digest 循环的次数，以及使用内置指令进行优化。
虽然上述技巧很实用，但实现最佳性能需要根据您的应用程序的复杂性做出具体的决策。通过深入了解性能最差的函数及其在您的特定情况下的性能需求，您可以最大限度地减少代码的负担，以提高可能的整体性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f83814f6b2d6eab3059580