首頁 >web前端 >js教程 >angularjs效能優化你知道多少?這裡有詳細的angularjs效能最佳化過程

angularjs效能優化你知道多少?這裡有詳細的angularjs效能最佳化過程

寻∝梦
寻∝梦原創
2018-09-07 11:43:121087瀏覽

認識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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn