AngularJS 是一个基于 MVVM（Model-View-ViewModel）模式的前端框架，它使用双向数据绑定的方式将数据模型和视图模型同步更新。它可以帮助开发人员构建高效的单页面应用（Single Page Application，SPA），但是 SPA 的实现方式也会导致一些性能问题。本文将介绍一些优化技巧，以帮助开发人员通过 AngularJS 实现更加高效的 SPA。
1. 避免使用 ng-repeat 指令嵌套
在 AngularJS 中，ng-repeat 指令非常常用，用于迭代页面上的数据列表。然而，如果你在一个 ng-repeat 指令中再嵌套另一个 ng-repeat 指令，会导致性能问题。例如：
-- -------------------- ---- -------
----
--- ---------------- -- -------
----
--- ---------------- -- -------------
---------------
-----
-----
-----
-----在这个例子中，ng-repeat 指令被嵌套了两层。这意味着 ng-repeat 指令会在每次循环时都重新计算，并生成对应的 DOM 元素。这些计算会对性能产生负面影响。
为了避免这个问题，在使用 ng-repeat 指令时应将其嵌套层级控制在最小化，或者使用其他的指令，例如 ng-switch 指令或者 ng-if 指令。
2. 使用 track by 指令去重
当使用 ng-repeat 指令迭代数组或对象时，AngularJS 会根据数组或对象中的每个元素生成对应的 DOM 元素。如果有多个对象中的某些元素是相等的，那么 AngularJS 会生成重复的 DOM 元素。
为了避免这个问题，可以在 ng-repeat 指令中使用 track by 指令。track by 指令告诉 AngularJS 使用对象中的一个属性作为元素的唯一标识符。例如：
<ul>
<li ng-repeat="item in items track by item.id">
{{item.name}}
</li>
</ul>在这个例子中，ng-repeat 指令使用 items 数组中每个对象的 id 属性作为唯一标识符。这意味着即使数组中有多个对象的 name 属性相等，AngularJS 也只会生成一个 DOM 元素。
3. 避免在循环中多次计算表达式
在使用 ng-repeat 指令时，有时候需要在每个迭代中计算表达式。例如：
<ul>
<li ng-repeat="item in items">
{{getName(item)}}
</li>
</ul>在这个例子中，每次循环都需要调用 getName 方法去计算表达式。这会导致性能问题，特别是在数据量较大的情况下。
为了避免这个问题，可以将表达式计算的结果缓存起来，或者将表达式计算的逻辑移到控制器中。
4. 使用 one-time binding 优化性能
在 AngularJS 中，双向数据绑定是核心功能之一。然而，如果没有正确使用双向数据绑定，会导致性能问题。
使用 one-time binding 是一种可以优化性能的方式。one-time binding 的意思是在绑定时只执行一次表达式，而不是在每个循环中都重新执行一次表达式。例如：
<ul>
<li ng-repeat="item in ::items">
{{item.name}}
</li>
</ul>在这个例子中，ng-repeat 指令使用 :: 操作符告诉 AngularJS 仅绑定一次表达式，而不是在每个循环中都重新计算一次表达式。
5. 使用 $timeout 代替 $scope.$apply
在 AngularJS 中，$timeout 服务可以将代码添加到下一个 tick 执行，而 $scope.$apply 方法会使 AngularJS 执行一次 digest 环节，这个过程会检查 $watcher 和 $observer 的值是否发生了变化，并更新对应的 DOM 元素。
在最好的情况下，可以使用 $timeout 代替 $scope.$apply 方法去更新视图，例如：
$timeout(function() {
$scope.data = newData;
});在这个例子中，$timeout 服务会在下一个 tick 执行，而不会立即更新数据。这可以避免在同一时刻进行大量的 DOM 操作，从而优化性能。
结论
通过避免使用 ng-repeat 指令嵌套、使用 track by 指令去重、避免在循环中多次计算表达式、使用 one-time binding 和使用 $timeout 代替 $scope.$apply，可以提高 AngularJS 应用程序的性能。
除此之外，还有其他一些高级优化技巧，如使用自定义指令、使用路由器、使用服务等等。应该根据具体需求和场景选择适合的优化技巧。
参考链接：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67763d526d66e0f9aa16e262