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

更新時(shí)間：2018年09月05日 10:30:44 作者：喵先生的進(jìn)階之路

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

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

優(yōu)化$watch

1.及時(shí)移除不必要的watch

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

2.盡量避免深度watch

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

3.ng-if和ng-show

盡量使用ng-if，因?yàn)榍罢卟粌H會(huì)移除DOM，還會(huì)移除相應(yīng)的watch。

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

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

$apply和$digest

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

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

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

優(yōu)化ng-repeat

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

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

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

ng-repeat="item in items"

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

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

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

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

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

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

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

去抖ng-model

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

其他優(yōu)化

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

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

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

總結(jié)

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

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

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