在使用 AngularJS 开发应用时，如何保证其性能和高效运行是非常重要的。本文将介绍有关 AngularJS 应用的性能调优和优化的技巧，以及如何实现最佳实践。
AngularJS 的性能问题
AngularJS 应用的性能问题通常出现在以下几个方面：
- 数据绑定：当数据发生变化时，AngularJS 会递归遍历整个数据模型，来更新视图中的所有绑定。这一过程可以非常消耗性能。
- DOM 操作：AngularJS 应用通常会对 DOM 进行操作，包括添加、删除、更新 DOM 元素等，这些操作也会影响应用的性能。
- 过滤器：AngularJS 中的过滤器可以很方便地进行数据处理，但在处理大量数据时，可能会导致性能问题。
为了避免以上问题，下面介绍几个性能调优和优化的技巧。
优化 Controller 和指令
避免在 Controller 中操作 DOM
应该把 DOM 操作放到指令中，而在 Controller 中只处理数据和业务逻辑。这样可以提高性能，并使应用结构更清晰。
示例：
// javascriptcn.com 代码示例
// 不好的写法
angular.module('myApp').controller('myCtrl', function ($scope) {
$scope.updateCount = function () {
var count = document.querySelectorAll('.my-element').length;
$scope.count = count;
};
});
// 好的写法
angular.module('myApp').directive('myCount', function () {
return {
link: function (scope, element) {
scope.updateCount = function () {
var count = element.find('.my-element').length;
scope.count = count;
};
}
};
});
angular.module('myApp').controller('myCtrl', function ($scope) {
$scope.updateCount();
});使用 ng-click 代替 ng-change
ng-change 会在每次值改变时触发，但使用 ng-click 会更好，因为它只在用户点击时触发。
示例：
<!-- 不好的写法 --> <input type="text" ng-model="count" ng-change="updateCount()"> <!-- 好的写法 --> <input type="text" ng-model="count"> <button ng-click="updateCount()">Update Count</button>
避免在指令中使用 scope.$watch
scope.$watch 可以监视 scope 中变量的变化，但会在每一次变化时触发 $digest 循环，降低性能。如果必须使用，可以使用 $watchCollection 代替。
示例：
// javascriptcn.com 代码示例
// 不好的写法
angular.module('myApp').directive('myDirective', function () {
return {
link: function (scope) {
scope.$watch('value', function (newValue, oldValue) {
// ...
});
}
};
});
// 好的写法
angular.module('myApp').directive('myDirective', function () {
return {
link: function (scope) {
scope.$watchCollection('value', function (newValue, oldValue) {
// ...
});
}
};
});优化数据绑定
减少绑定的对象和属性
在创建 ng-model 的时候，应该设置 ng-model-options="{getterSetter: true}"，这样可以在更新数据的时候避免遍历整个对象，提高性能。
示例：
// javascriptcn.com 代码示例
<!-- 不好的写法 -->
<input type="text" ng-model="obj.value">
<!-- 好的写法 -->
<input type="text" ng-model="getValue()" ng-model-options="{getterSetter: true}">
<!-- Controller 代码 -->
$scope.obj = {value: 'hello'};
$scope.getValue = function () {
return $scope.obj.value;
};
$scope.setValue = function (newValue) {
$scope.obj.value = newValue;
};减少绑定的频率
可以使用 ng-model-options 的 debounce 和 throttle 属性来设置延迟绑定，降低绑定的频率，提高性能。
示例：
<!-- 在输入框输入时不断触发 -->
<input type="text" ng-model="value">
<!-- 在输入框输入时每 500ms 触发一次绑定 -->
<input type="text" ng-model="value" ng-model-options="{debounce: 500}">优化过滤器
避免在 HTML 中使用过滤器
过滤器在 HTML 中使用时，会在每一次 $digest 循环时都执行。因此，应该把过滤器的逻辑放到 Controller 中，在数据发生变化时再传递给视图。
示例：
// javascriptcn.com 代码示例
<!-- 不好的写法 -->
<ul>
<li ng-repeat="item in items | myFilter">{{ item }}</li>
</ul>
<!-- 好的写法 -->
<ul>
<li ng-repeat="item in filteredItems">{{ item }}</li>
</ul>
<!-- Controller 代码 -->
angular.module('myApp').controller('myCtrl', function ($scope, myFilter) {
$scope.items = [...];
$scope.filterValue = '...';
$scope.filteredItems = myFilter($scope.items, $scope.filterValue);
$scope.$watchGroup(['items', 'filterValue'], function (newValues, oldValues) {
$scope.filteredItems = myFilter(newValues[0], newValues[1]);
});
});
angular.module('myApp').filter('myFilter', function () {
return function (input, filterValue) {
var output = [];
// ...
return output;
};
});避免在循环中使用过滤器
在循环中使用过滤器，会导致过滤器在每一个循环中都被执行一次。应该将过滤器的逻辑放到外部，并预处理输出结果，避免重复执行该过滤器。
示例：
// javascriptcn.com 代码示例
<!-- 不好的写法 -->
<ul>
<li ng-repeat="item in items | myFilter">{{ item }}</li>
</ul>
<!-- 好的写法 -->
<ul>
<li ng-repeat="item in filteredItems">{{ item }}</li>
</ul>
<!-- Controller 代码 -->
angular.module('myApp').controller('myCtrl', function ($scope, myFilter) {
$scope.items = [...];
$scope.filterValue = '...';
var filteredItems = myFilter($scope.items, $scope.filterValue);
$scope.filteredItems = [];
for (var i = 0; i < $scope.items.length; i++) {
if (filteredItems[i]) {
$scope.filteredItems.push(items[i]);
}
}
});
angular.module('myApp').filter('myFilter', function () {
return function (input, filterValue) {
var output = [];
// ...
return output;
};
});总结
本文介绍了 AngularJS 应用的性能调优和优化的一些技巧，包括优化 Controller 和指令、优化数据绑定、优化过滤器等。通过合理使用这些技巧，我们可以让 AngularJS 应用更加高效地运行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65401d147d4982a6eb9a548e