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 codefunction 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的引用改變。