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...