时间：2022-02-02 09:34:23 | 栏目：AngularJS | 点击：次
学习angularjs有一段时间了，但是一直都没有怎么考虑过性能方面的问题，上次在研究过滤器的时候涉及到了性能问题。所以自己也总结了下常用的性能优化。
优化$watch
1.及时移除不必要的watch
var unWatch = $scope.$watch('', function() {
// do something
...
if (someCondition) {
unWatch(); // 取消监听
}
});
2.尽量避免深度watch
我们都知道$watch有三个参数，第三个参数为true就是要深度监听的。这个参数主要是在嵌套对象的时候会用到，但是要尽量避免使用，如果你只是想看看基本属性的变化，那么就不要使用第三个参数进行深度的监听，这回大大拖慢每一次监听的时间。
3.ng-if和ng-show
尽量使用ng-if，因为前者不仅会移除DOM，还会移除相应的watch。
而ng-show只是简单的隐藏，但其实已经加载完成。
ng-show指令在特定的元素上切换CSS显示属性，而ng-if指令实际上会先从DOM中删除元素，如果在需要的话重新创建。此外，ng-switch指令是ng-if的替代方案，具有相同性能优势。
$apply和$digest
$apply会使angular进入$digest循环，然后从$rootScope开始遍历，检查变更。
$digest只会检查当前scope以及其子scope。
所以，但我们确定某个操作只会影响当前的scope，使用$digest会稍微提升性能。
优化ng-repeat
ng-repeat真是使用比较多的指令了，但是好像经常忽略track by。
建议避免在JavaScript中使用ng-repeat来构建HTML。对于某些应用程序来说，使用ng-repeat会增加不必要的监视者。使用ng-bind-html指令是解决这个问题的更好的办法。
我们的ng-repeat经常就这么写：
ng-repeat="item in items"
但是如果这么写的话，当我们刷新页面的时候，它会删除所有已有的DOM，然后重新创建和渲染。但是如果我们加上track by就不同了：
ng-repeat="item in item track by item.id"
这样angular就会复用已有的DOM，然后更新变化的部分。这就减少了不必要的渲染。
使用$watchCollection（包括第三个参数）
通常在使用$watch的时候只会用到两个参数，但是如果加上第三个参数的话，例如`$watch('value',function(){},true)`，则可以让Angular执行深度检查（检查对象的每个属性）。但这可能会带来更多的性能开销。因此，为了解决这个性能问题，Angular提供了`$watchCollection('value', function(){})`，它的第三个参数的功能与$watch的几乎相同，只是它只检查对象属性的第一层，以降低性能开销。
使用console.time来调试问题
如果你在对应用程序努力地进行调试，以解决性能问题的话，请使用console.time，这是一个非常棒的API。
去抖ng-model
你可以使用ng-model来去除输入。例如，要撤销像GOOGLE这样的搜索输入的话，你必须使用ng-model-options=”{debounce:250}”。由于输入模型发生了变化，使得digest cycle每250ms触发不超过一次。
其他优化
console.log很耗时，发布的时候一定要干掉。
慎用filter，可以在controller中预先处理。
尽量避免使用广播事件，可以使用双向数据绑定或者共享service等方法代替。
总结
我总结的还不是很全，都只是我常用到的。随着更多的使用，理解也会更进一步的加深。