angularjs效能優化你知道多少？這裡有詳細的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只是簡單的隱藏，但其實已經載入完成。 (想學更多就到PHP中文網angularjs學習手冊欄位中學習)

#二、$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等方法來取代。

五、關於angularjs的總結

我總結的還不是很全，都只是我常用到的。隨著更多的使用，理解也會更進一步的加深。 （最後推薦PHP中文網angularjs參考手冊欄目，那裡有你想學的angularjs的內容）

【小編推薦】

angularjs的表達式怎麼用？ angularjs的表達式的使用實例

angularjs和jQuery的差異有哪些？ angularjs比較jQuery的結果

以上是angularjs效能優化你知道多少？這裡有詳細的angularjs效能最佳化過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！