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只是简单的隐藏，但其实已经加载完成。

$apply和$digest

$apply会使angular进入$digest循环，而后从$rootScope开始遍历，检查变动。

$digest只会检查当前scope以及其子scope。

因此，但咱们肯定某个操做只会影响当前的scope，使用$digest会稍微提高性能。

优化ng-repeat

ng-repeat真是使用比较多的指令了，可是好像常常忽略track by。

咱们的ng-repeat常常就这么写：

ng-repeat="item in items"

可是若是这么写的话，当咱们刷新页面的时候，它会删除全部已有的DOM，而后从新建立和渲染。可是若是咱们加上track by就不一样了：

ng-repeat="item in item track by item.id"

这样angular就会复用已有的DOM，而后更新变化的部分。这就减小了没必要要的渲染。

其余优化

• console.log很耗时，发布的时候必定要干掉。
• 慎用filter，能够在controller中预先处理。
• 尽可能避免使用广播事件，可使用双向数据绑定或者共享service等方法代替。

总结

我总结的还不是很全，都只是我经常使用到的。随着更多的使用，理解也会更进一步的加深。

---

参考：https://github.com/atian25/bl...