學習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。