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等方法代替。

總結

我總結的還不是很全，都只是我常用到的。隨著更多的使用，理解也會更進一步的加深。

參考：https://github.com/atian25/blog/issues/5

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。