本篇文章跟大家介紹一下Angular綁定（髒檢查）方面的效能最佳化技巧。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
#雙向綁定是一柄雙面刃，提高開發效率的同時，也犧牲了性能。當然，隨著硬體效能的提升，Angular自身效能的提升，對於一般（中小）複雜度的應用，效能問題可以忽略不計。但對於特殊場景，或複雜頁面來說，我們需要單獨的處理資料綁定問題，否則就會有卡頓的現象，影響使用者體驗。 【相關教學推薦：《angular教學》】
平常的一些小技巧，小習慣，都可以改善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>對於一些很複雜的頁面，上面的小技巧就不夠用了，不過Angular也是考慮到這些了，提供了不少方法。
Angular 對比 AngularJS 在變化偵測上由原來的雙向偵測(父->子，子->父)變成單向(父->子)。所以每一次變化偵測都會確定性地收斂。
Angular定義一個元件時，可以傳入一個變化偵測配置項目為
changeDetection: ChangeDetectionStrategy.OnPush | ChangeDetectionStrategy.Default;
onpush策略只判斷輸入的引用(如果是object)是否改變，來判斷是否進行髒檢查。因此，我們可以使用onpush策略來減少變化檢測的開銷。
#Angular依賴NgZone來監聽非同步操作，並從根部執行變化偵測。換句話說，我們程式碼中的每一個 addEventListener都會觸發髒檢查。但如果我們非常明確，有些addEventListener要執行的東西，不會（或說可以忽略）影響資料結果，不想然他觸發髒檢查。如監測scroll，監測滑鼠事件等。
針對這種情況， 我們可以使用zone提供的runOutsideAngular，讓這些事件不觸發髒檢查。
this.zone.runOutsideAngular(() => {
window.document.addEventListener('mousemove', this.bindMouse);
});#Angular的ChangeDetectorRef實例上提供了可以綁定或解綁某個元件髒檢查的方法。
class ChangeDetectorRef {
markForCheck() : void // 通知框架进行变化检查/Change Detection
detach() : void // 禁止脏检查
detectChanges() : void // 手工触发脏检查， 从该组件到各个子组件执行一次变化检测
checkNoChanges() : void
reattach() : void // detach逆操作，启用脏检查
}平時的一些小習慣，都可以提高angular的效能；
針對複雜應用，或是當出現卡頓時，我們也是有辦法的！
更多程式相關知識，請造訪：程式設計教學！ ！
以上是淺談angular中優化綁定（髒檢查）效能的小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
