淺談angular中優化綁定（髒檢查）效能的小技巧

本篇文章跟大家介紹一下Angular綁定（髒檢查）方面的效能最佳化技巧。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

1. 為什麼要優化

#雙向綁定是一柄雙面刃，提高開發效率的同時，也犧牲了性能。當然，隨著硬體效能的提升，Angular自身效能的提升，對於一般（中小）複雜度的應用，效能問題可以忽略不計。但對於特殊場景，或複雜頁面來說，我們需要單獨的處理資料綁定問題，否則就會有卡頓的現象，影響使用者體驗。 【相關教學推薦：《angular教學》】

2. 程式設計習慣方面

平常的一些小技巧，小習慣，都可以改善Angular綁定方面的效能。

2.1. NgForOf，加入trackBy提升效能

trackBy定義如何追蹤可迭代項目的變更的函數。在迭代器中新增、移動或刪除條目時，指令必須重新渲染適當的 DOM 節點。為了最大程度地減少 DOM 中的攪動，僅重新渲染已更改的節點。

預設情況下，變更偵測器假定物件實例標識可迭代物件。提供此函數後，指令將使用呼叫此函數的結果來標識項節點，而不是物件本身的標識。

2.2. Angular資料綁定的三種方式

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>

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

• 綁定方法呼叫的結果：在每個髒值偵測過程中，classes方程式都要被呼叫一遍。如果沒有特殊需求，應盡量避免這種使用方式。

• pipe方式： 它和綁定function類似，每次髒值偵測classPipe都會被呼叫。不過Angular給pipe做了優化，加了緩存，如果item和上次相等，則直接回傳結果。

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

2.3. 除非需要，都是用單向綁定，減少監控值的數量

對於一般數據來說，都是只需要展示給用戶，不需要修改。那麼對於這部分數據，使用單向綁定即可(ts->html).
如：

<!-- 也称插值绑定 -->
 <span>{{yourMessage}}</span>

3. ChangeDetectionStrategy.OnPush 進行效能提升

對於一些很複雜的頁面，上面的小技巧就不夠用了，不過Angular也是考慮到這些了，提供了不少方法。
Angular 對比 AngularJS 在變化偵測上由原來的雙向偵測(父->子，子->父)變成單向(父->子)。所以每一次變化偵測都會確定性地收斂。
Angular定義一個元件時，可以傳入一個變化偵測配置項目為

changeDetection: ChangeDetectionStrategy.OnPush | ChangeDetectionStrategy.Default;

onpush策略只判斷輸入的引用(如果是object)是否改變，來判斷是否進行髒檢查。因此，我們可以使用onpush策略來減少變化檢測的開銷。

4. 利用ngzone-runOutsideAngular最佳化

#Angular依賴NgZone來監聽非同步操作，並從根部執行變化偵測。換句話說，我們程式碼中的每一個 addEventListener都會觸發髒檢查。但如果我們非常明確，有些addEventListener要執行的東西，不會（或說可以忽略）影響資料結果，不想然他觸發髒檢查。如監測scroll，監測滑鼠事件等。

針對這種情況， 我們可以使用zone提供的runOutsideAngular，讓這些事件不觸發髒檢查。

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

5. 手動控制髒檢查 ChangeDetectorRef

#Angular的ChangeDetectorRef實例上提供了可以綁定或解綁某個元件髒檢查的方法。

class ChangeDetectorRef {
  markForCheck() : void     // 通知框架进行变化检查/Change Detection
  detach() : void           // 禁止脏检查
  detectChanges() : void    // 手工触发脏检查， 从该组件到各个子组件执行一次变化检测
  checkNoChanges() : void
  reattach() : void         // detach逆操作，启用脏检查
}

6. 總結

• 平時的一些小習慣，都可以提高angular的效能；

• 針對複雜應用，或是當出現卡頓時，我們也是有辦法的！

更多程式相關知識，請造訪：程式設計教學！ ！

以上是淺談angular中優化綁定（髒檢查）效能的小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！