angular中如何優(yōu)化綁定性能

這篇文章主要介紹了angular中如何優(yōu)化綁定性能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1. 為什么要優(yōu)化

雙向綁定是一柄雙刃劍，提高開(kāi)發(fā)效率的同時(shí)，也犧牲了性能。當(dāng)然，隨著硬件性能的提升，Angular自身性能的提升，對(duì)于一般（中?。?fù)雜度的應(yīng)用，性能問(wèn)題可以忽略不計(jì)。但是對(duì)于特殊場(chǎng)景，或復(fù)雜頁(yè)面來(lái)說(shuō)，我們就需要單獨(dú)的處理數(shù)據(jù)綁定問(wèn)題，否則就會(huì)有卡頓的現(xiàn)象，影響用戶(hù)體驗(yàn)?！鞠嚓P(guān)教程推薦：《angular教程》】

2. 編程習(xí)慣方面

平時(shí)的一些小技巧，小習(xí)慣，都可以改善Angular綁定方面的性能。

2.1. NgForOf，加入trackBy提升性能

trackBy定義如何跟蹤可迭代項(xiàng)的更改的函數(shù)。在迭代器中添加、移動(dòng)或刪除條目時(shí)，指令必須重新渲染適當(dāng)?shù)?DOM 節(jié)點(diǎn)。為了最大程度地減少 DOM 中的攪動(dòng)，僅重新渲染已更改的節(jié)點(diǎn)。

默認(rèn)情況下，變更檢測(cè)器假定對(duì)象實(shí)例標(biāo)識(shí)可迭代對(duì)象。提供此函數(shù)后，指令將使用調(diào)用此函數(shù)的結(jié)果來(lái)標(biāo)識(shí)項(xiàng)節(jié)點(diǎn)，而不是對(duì)象本身的標(biāo)識(shí)。

2.2. Angular數(shù)據(jù)綁定的三種方式

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接綁定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.綁定方法調(diào)用的結(jié)果 -->
</div>

• 直接綁定： 大多數(shù)情況下，這都是性能最好的方式。

• 綁定方法調(diào)用的結(jié)果：在每個(gè)臟值檢測(cè)過(guò)程中，classes方程都要被調(diào)用一遍。如果沒(méi)有特殊需求，應(yīng)盡量避免這種使用方式。

• pipe方式： 它和綁定function類(lèi)似，每次臟值檢測(cè)classPipe都會(huì)被調(diào)用。不過(guò)Angular給pipe做了優(yōu)化，加了緩存，如果item和上次相等，則直接返回結(jié)果。

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

2.3. 除非需要，都是用單向綁定，減少監(jiān)控值的個(gè)數(shù)

對(duì)于一般數(shù)據(jù)來(lái)說(shuō)，都是只需要展示給用戶(hù)，不需要修改。那么對(duì)于這部分?jǐn)?shù)據(jù)，使用單向綁定即可(ts->html).
如：

<!-- 也稱(chēng)插值綁定 -->
 <span>{{yourMessage}}</span>

3. ChangeDetectionStrategy.OnPush 進(jìn)行性能提升

對(duì)于一些很復(fù)雜的頁(yè)面，上面的小技巧就不夠用了，不過(guò)Angular也是考慮到這些了，提供了不少方法。
Angular 對(duì)比 AngularJS 在變化檢測(cè)上由原來(lái)的雙向檢測(cè)(父->子，子->父)變?yōu)榱藛蜗?父->子)。所以每一次變化檢測(cè)都會(huì)確定性地收斂。
Angular定義一個(gè)組件時(shí)，可以傳入一個(gè)變化檢測(cè)配置項(xiàng)為

changeDetection: ChangeDetectionStrategy.OnPush | ChangeDetectionStrategy.Default;

onpush策略只判斷輸入的引用(如果是object)是否改變，來(lái)判斷是否進(jìn)行臟檢查。因此，我們可以使用onpush策略來(lái)減少變化檢測(cè)的開(kāi)銷(xiāo)。

4. 利用ngzone-runOutsideAngular優(yōu)化

Angular依賴(lài)NgZone來(lái)監(jiān)聽(tīng)異步操作，并從根部執(zhí)行變化檢測(cè)。換句話(huà)說(shuō)，我們代碼中的每一個(gè) addEventListener都會(huì)觸發(fā)臟檢查。但是如果我們非常明確，有些addEventListener要執(zhí)行的東西，不會(huì)（或者說(shuō)可以忽略）影響數(shù)據(jù)結(jié)果，不想然他觸發(fā)臟檢查。比如監(jiān)測(cè)scroll，監(jiān)測(cè)鼠標(biāo)事件等。

針對(duì)這種情況， 我們可以使用zone提供的runOutsideAngular，讓這些事件不觸發(fā)臟檢查。

this.zone.runOutsideAngular(() => {
    window.document.addEventListener('mousemove', this.bindMouse);
});

5. 手動(dòng)控制臟檢查 ChangeDetectorRef

Angular的ChangeDetectorRef實(shí)例上提供了可以綁定或解綁某個(gè)組件臟檢查的方法。

class ChangeDetectorRef {
  markForCheck() : void     // 通知框架進(jìn)行變化檢查/Change Detection
  detach() : void           // 禁止臟檢查
  detectChanges() : void    // 手工觸發(fā)臟檢查， 從該組件到各個(gè)子組件執(zhí)行一次變化檢測(cè)
  checkNoChanges() : void
  reattach() : void         // detach逆操作，啟用臟檢查
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“angular中如何優(yōu)化綁定性能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!