快捷導(dǎo)航

angularjs性能優(yōu)化的方法

更新時間：2018年09月05日 10:30:44 作者：喵先生的進階之路

這篇文章主要介紹了angularjs性能優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

學(xué)習(xí)angularjs有一段時間了，但是一直都沒有怎么考慮過性能方面的問題，上次在研究過濾器的時候涉及到了性能問題。所以自己也總結(jié)了下常用的性能優(yōu)化。

優(yōu)化$watch

1.及時移除不必要的watch

var unWatch = $scope.$watch('', function() {
  // do something
  ...
  if (someCondition) {
    unWatch();  // 取消監(jiān)聽
  }
});

2.盡量避免深度watch

我們都知道$watch有三個參數(shù)，第三個參數(shù)為true就是要深度監(jiān)聽的。這個參數(shù)主要是在嵌套對象的時候會用到，但是要盡量避免使用，如果你只是想看看基本屬性的變化，那么就不要使用第三個參數(shù)進行深度的監(jiān)聽，這回大大拖慢每一次監(jiān)聽的時間。

3.ng-if和ng-show

盡量使用ng-if，因為前者不僅會移除DOM，還會移除相應(yīng)的watch。

而ng-show只是簡單的隱藏，但其實已經(jīng)加載完成。

ng-show指令在特定的元素上切換CSS顯示屬性，而ng-if指令實際上會先從DOM中刪除元素，如果在需要的話重新創(chuàng)建。此外，ng-switch指令是ng-if的替代方案，具有相同性能優(yōu)勢。

$apply和$digest

$apply會使angular進入$digest循環(huán)，然后從$rootScope開始遍歷，檢查變更。

$digest只會檢查當(dāng)前scope以及其子scope。

所以，但我們確定某個操作只會影響當(dāng)前的scope，使用$digest會稍微提升性能。

優(yōu)化ng-repeat

ng-repeat真是使用比較多的指令了，但是好像經(jīng)常忽略track by。

建議避免在JavaScript中使用ng-repeat來構(gòu)建HTML。對于某些應(yīng)用程序來說，使用ng-repeat會增加不必要的監(jiān)視者。使用ng-bind-html指令是解決這個問題的更好的辦法。

我們的ng-repeat經(jīng)常就這么寫：

ng-repeat="item in items"

但是如果這么寫的話，當(dāng)我們刷新頁面的時候，它會刪除所有已有的DOM，然后重新創(chuàng)建和渲染。但是如果我們加上track by就不同了：

ng-repeat="item in item track by item.id"

這樣angular就會復(fù)用已有的DOM，然后更新變化的部分。這就減少了不必要的渲染。

使用$watchCollection（包括第三個參數(shù)）

通常在使用$watch的時候只會用到兩個參數(shù)，但是如果加上第三個參數(shù)的話，例如`$watch('value',function(){},true)`，則可以讓Angular執(zhí)行深度檢查（檢查對象的每個屬性）。但這可能會帶來更多的性能開銷。因此，為了解決這個性能問題，Angular提供了`$watchCollection('value', function(){})`，它的第三個參數(shù)的功能與$watch的幾乎相同，只是它只檢查對象屬性的第一層，以降低性能開銷。

使用console.time來調(diào)試問題

如果你在對應(yīng)用程序努力地進行調(diào)試，以解決性能問題的話，請使用console.time，這是一個非常棒的API。

去抖ng-model

你可以使用ng-model來去除輸入。例如，要撤銷像GOOGLE這樣的搜索輸入的話，你必須使用ng-model-options=”{debounce:250}”。由于輸入模型發(fā)生了變化，使得digest cycle每250ms觸發(fā)不超過一次。

其他優(yōu)化

console.log很耗時，發(fā)布的時候一定要干掉。

慎用filter，可以在controller中預(yù)先處理。

盡量避免使用廣播事件，可以使用雙向數(shù)據(jù)綁定或者共享service等方法代替。

總結(jié)

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。