這次帶給大家如何優化Angular程式碼，如何優化Angular程式碼的注意事項有哪些，以下就是實戰案例，一起來看一下。
Summary
Angular 4的髒值偵測是個老話題了，而理解這個模型是做Angular效能優化的基礎。因此，今天我們再來聊聊Angular 4髒值偵測的原理，並看看效能最佳化的小提示。
進入點 - Zone.js
Angular 4是一個MVVM框架。資料模型（Model）轉換成視圖模型（ViewModel）後，綁定到視圖（View）上渲染成肉眼可見的頁面。因此，發現資料模型變化的時間點是更新頁面的關鍵，也是呼叫髒值偵測的關鍵。
經過分析，工程師發現，資料的變化往往由macrotask和microtask等非同步事件所引起。因此，透過重寫瀏覽器所有的非同步API，就能從源頭有效監聽資料變化。 Zone.js就是這樣一個猴子腳本（Monkey Patch）。 Angular 4使用了一個客製化的Zone（NgZone），它會通知Angular可能有資料變化，需要更新視圖中的資料（髒值偵測）。
髒值偵測（Change Detection）
髒值偵測的基本原理是儲存舊數值，並在進行偵測時，把當前時刻的新值和舊值比對。若相等則沒有變化，反之則偵測到變化，需要更新視圖。
Angular 4把頁面切割成若干個Component（元件），組成一棵元件樹。進入髒值偵測後，從根組件自頂向下進行偵測。 Angular有兩種策略：Default和OnPush。它們配置在組件上，決定髒值偵測過程中不同的行為。
Default - 預設策略
ChangeDetectionStrategy.Default。它也意味著一旦發生可能有資料變化的事件，就總是偵測這個元件。
髒值偵測的操作基本上可以理解為以下幾步。 1）更新子元件綁定的properties，2）呼叫子元件的NgDoCheck和NgOnChanges生命週期鉤子（Lifecycle hook），3）更新自己的DOM，4）對子元件髒值偵測。這是一個從根組件開始的遞歸方程式。
// This is not Angular code
function changeDetection(component) {
updateProperties(component.children);
component.children.forEach(child => {
child.NgDoCheck();
child.NgOnChanges();
};
updateDom(component);
component.children.forEach(child => changeDetection(child));
}我們開發者會非常關注DOM更新的順序，以及呼叫NgDoCheck和NgOnChanges的順序。可以發現：
DOM更新是深度優先的
NgDoCheck和NgOnChanges並不是（也不是深度優先）
#OnPush - 單次偵測策略
ChangeDetectionStrategy.OnPush。只在Input Properties變化（OnPush）時才檢測這個組件。因此當Input不變時，它只在初始化時被偵測，也叫單次偵測。它的其他行為和Default保持一致。
要注意的是，OnPush只偵測Input的引用。 Input物件的屬性變化並不會觸發目前組件的髒值偵測。
雖然OnPush策略提高了性能，但也是Bug的高發地點。解往往是將Input轉換成Immutable的形式，強制Input的引用改變。
Tips
資料綁定
#Angular有3種合法的資料綁定方式，但它們的效能是不一樣的。
直接綁定資料
<ul>
<li *ngFor="let item of arr">
<span>Name {{item.name}}</span>
<span>Classes {{item.classes}}</span><!-- Binding a data directly. -->
</li>
</ul>大多數情況下，這都是效能最好的方式。
綁定一個function呼叫結果
<ul>
<li *ngFor="let item of arr">
<span>Name {{item.name}}</span>
<span>Classes {{classes(item)}}</span><!-- Binding an attribute to a method. The classes would be called in every change detection cycle -->
</li>
</ul>在每個髒值偵測過程中，classes方程式都要被呼叫一遍。設想使用者正在滾動頁面，多個macrotask產生，每個macrotask都至少進行一次髒值檢測。如果沒有特殊需求，應盡量避免這種使用方式。
綁定資料 pipe
<ul>
<li *ngFor="let item of instructorList">
<span>Name {{item.name}}</span>
<span>Classes {{item | classPipe}}</span><!-- Binding data with a pipe -->
</li>
</ul>它和綁定function類似，每次髒值偵測classPipe都會被呼叫。不過Angular給pipe做了優化，加了緩存，如果item和上次相等，則直接回傳結果。
NgFor
多數情況下，NgFor應該伴隨trackBy方程式使用。否則，每次髒值偵測過程中，NgFor會把清單裡每一項都執行更新DOM操作。
@Component({
selector: 'my-app',
template: `
<ul>
<li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
</ul>
<button (click)="getItems()">Refresh items</button>
`,
})
export class App {
collection;
constructor() {
this.collection = [{id: 1}, {id: 2}, {id: 3}];
}
getItems() {
this.collection = this.getItemsFromServer();
}
getItemsFromServer() {
return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
}
trackByFn(index, item) {
return index;
}
}我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是如何優化Angular程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
