angular如何進行效能最佳化？以下這篇文章給大家深入介紹angular 效能優化方案--變更偵測，希望對大家有幫助！
angular 效能最佳化－變更偵測
前端效能指標描述，業界皆各有說詞，總結下來都和首屏表現和頁面流暢度相關，
本次將會從頁面流暢度的角度，對頁面互動效能優化進行分析。 【相關教學推薦：《angular教學》】
什麼是頁面流暢度？
頁面流暢度是透過幀率FPS（Frames Per Second - 每秒傳輸幀數）判定的，一般主流的瀏覽器螢幕更新率都在60Hz（每秒刷新60次），最優的幀率在60 FPS，幀率越高，頁面就越流暢，60Hz意味著每隔16.6ms會刷新一次顯示屏，也就是每一次渲染頁面需要在16.6ms內完成，否則就會導致頁面失幀，出現卡頓現象。 根因在於：瀏覽器中的 JavaScript 執行和頁面渲染會互相阻塞。
在Chrome 的devtools 中我們可以執行Cmd Shift P 輸入show fps 快速開啟fps 面板，如下圖所示：
#透過觀察FPS 面板，如下圖所示：
#透過觀察FPS 面板，如下圖所示：
#dFPS 面板面板， ，我們可以很方便的對目前頁面的流暢度進行監控
1 影響頁面效能的因素
頁面互動是否流暢，且在於頁面回應是否流暢，而頁面回應本質上是將頁面狀態的變更重新渲染到頁面上的過程。
頁面回應過程大致如下：
一般情況Event Handler事件處理邏輯不會消耗太多時間，所以影響angular效能的因素主要在於非同步事件觸發和
變更偵測
。
一般情況Event Handler事件處理邏輯不會消耗太多時間，所以影響angular效能的因素主要在於非同步事件觸發和變更偵測。
對angular來說，頁面渲染的過程就是變更偵測的過程，可以理解為angular的變更偵測要在16.6ms內完成才不會導致頁面遺失畫面、卡頓。 可以從以下三個方面優化頁面回應的效能。 （1）對於觸發事件階段，可以
減少非同步事件的觸發
，來減少整體的變更偵測次數和重新渲染；
（2）對於Event Handler 執行邏輯階段，可以透過最佳化複雜程式碼邏輯來減少執行時間；（3）對於Change Detection 偵測資料綁定並更新DOM 階段，可以減少變更偵測和模板資料的計算次數來減少渲染時間；
#對於（2）Event Handler要具體問題具體分析，不做討論，主要針對（ 1）（3）進行最佳化
2
最佳化方案
2.1 減少非同步事件觸發
Angular在預設變更偵測模式下，非同步事件會觸發全域的變更偵測，因此，減少非同步事件的觸發會大幅提升angular的效能。
非同步事件包含Macro Task（巨集任務）事件與Micro Task微任務事件
對非同步事件的最佳化事件為最佳化事件的最佳化事件。例如document上的click、mouseup、mousemove…等監聽事件。
### 監聽事件情境：###### Renderer2.listen( #### document.addEventListener(…)## #### dom監聽事件，且不需要觸發的時候一定要移除。 ###
範例：[pop]提示框指令
使用情境：表格列篩選，點選圖示以外的地方，或是頁面捲動，列篩選彈框隱藏
先前的做法是指
在pop指令裡監聽document的click事件和scroll事件，這樣有個弊端就是提示框未顯示，但依然存在監聽事件，很不合理。
合理的解決方案：當提示框顯示的時候才去監聽click和scroll事件，隱藏的時候就移除監聽事件。 
對於頻繁觸發的dom監聽事件，可以使用rjx的運算元對事件進行最佳化。詳情請參考Rjx操作符。
RxJS Marbles
。
2.2 變更偵測
什麼是變更偵測？ 要瞭解變更偵測，我們可以從變更偵測的目標中找出答案。 angular變更偵測目標，是讓模型（TypeScript程式碼）與範本（HTML）保持同步。因此，變更偵測可以理解為：偵測模型變更的同時，更新範本（ DOM ）
。
變更偵測流程是什麼？ 
透過在元件樹中依照
自頂向下
的順序執行變更偵測，也就是先對父元件執行變更偵測，再對子組件進行變更檢測。首先檢查父元件的資料變更，然後更新父元件模板，在更新模板的時候遇到子元件，會去更新子元件上綁定的值，然後進入子元件，看@Input輸入值的索引是否改變，如果改變就將該子元件標記為dirty，也就是後續需要變更偵測的，標記完子元件之後，繼續更新父元件中子元件後面的模板，父元件模板全部更新完之後再去對子元件做變更檢測。
2.2.1 angular變更偵測原理
在預設變更偵測default模式下，非同步事件觸發Angular的變更偵測的原理是angular透過使用Zone.js處理非同步事件時呼叫了ApplicationRef的tick()方法從根組件到子組件執行變更檢測。 Angular 應用初始化過程中，實例化了一個zone （NgZone），然後將所有邏輯都跑在該物件的 _inner 物件中。
Zone.js實作了以下幾個類別：-
- Zone類，JavaScript 事件的執行環境，和執行緒一樣，它們可以帶一些數據，並且可能擁有父子 zone。
- ZoneTask類，包裝後的非同步事件，這些 task 有三種子類：
-
- MicroTask，由 Promise 創建。
- MacroTask，由 setTimeout 等建立。
EventTask，由 addEventListener 等創建，例如dom事件。
-
- ZoneSpec對象，創建一個ngZone 時給它提供的參數，有三個可以觸發檢測的鉤子：
-
- onInvoke，呼叫某個回調函數時觸發的鉤子。
- onInvokeTask，ZoneTask 被觸發時觸發的鉤子，例如 setTimeout 到時。
onHasTask，偵測到有或沒有 ZoneTask 時觸發的鉤子（即對第一個 schedule 的 zone 和最後一個 invoke 或 cancel 的 task 觸發）。
-
ZoneDelegate類，負責呼叫鉤子。
偵測過程原理大概如下：
使用者操作觸發非同步事件（例如：dom事件，介面請求…）
=> ZoneTask類別處理事件。 invokeTask()函數中呼叫zone的runTask()方法，在runTask方法中，zone透過_zoneDelegate實例屬性，呼叫ZoneSpec的鉤子
=> ZoneSpec的三個鉤子（onInvokeTask、onInvoke、onHasTask）鉤子裡透過checkStable()函數觸發zone.onMicrotaskEmpty.emit(null)通知
detectChanges()
#detectrefreshView()呼叫executeTemplate()，executeTemplate方法中呼叫
templateFn ()
更新範本、子元件綁定的值（
這時候會去偵測子元件的###@Input()###輸入引用是否改變，如果有改變，會將子元件標記為###Dirty###，也就是該子元件需要變更偵測###）######詳細變更偵測原理流程圖：###
簡化流程：
觸發非同步事件
=> ZoneTask處理事件
=> 觸發非同步事件
=> ZoneTask處理事件
=> ZoneDelegate 呼叫ZoneSpec的鉤子觸發onMicrotaskEmpty通知
=> 根元件收到onMicrotaskEmpty通知，執行tick()，開始偵測並更新dom
由上述程式碼可知，
當微任務為空的時候才會觸發變更偵測
。 
簡略變更偵測原理流程圖：
Angular 原始碼解析 Zone.js參考
blog
#。
2.2.2 變更偵測最佳化方案
1 ）使用OnPush 模式
原理：減少1次變更偵測的耗時。
OnPush模式與Default模式的差異在於：dom監聽事件、timer事件、promise都不會觸發變更偵測。 Default模式的元件狀態始終為CheckAlways，表示元件每次偵測週期都要偵測。
OnPush模式下：以下情況會觸發變更偵測
S1、元件的@Input引用變更。
S2、元件的DOM所綁定的事件，包含它子元件的DOM所綁定的事件，如 click、submit、mouse down。 @HostListener()
注意：
以renderer2.listen()監聽的dom事件不會觸發變更偵測
Event List 會觸發變更偵測
S3、Observable 訂閱事件，同時設定Async pipe。
S4、使用以下方式手動觸發變更偵測：
ChangeDetectorRef.detectChanges()：觸發目前元件和非OnPush子元件的變更偵測。
ChangeDetectorRef.markForCheck()：將目前視圖及其所有的祖先標記為髒，下次偵測週期時會觸發偵測。
ApplicationRef.tick()：不會觸發變更偵測
2 ）使用NgZone.runOutsideAngular()
原則：減少變更偵測次數
# 全域dom事件監聽寫在NgZone.runOutsideAngular()方法的回呼裡面，dom事件將不會觸發angular的變更偵測。如果目前元件未更新，可以在回呼函數裡執行ChangeDetectorRef的detectChanges()鉤子來手動觸發目前元件的變更偵測。
範例：app-icon-react動態圖示元件
2.2.3 除錯方法
方式1：可在瀏覽器控制台，使用Angular DevTools外掛檢視某次dom事件，angular的偵測狀況：
方式2：可在控制台直接輸入：ng.profiler.timeChangeDetection()檢視檢測時間，這種方式可查看全域的檢測時間。參考部落格
Profiling Angular Change Detection
2.3 範本（HTML）最佳化
2.3.1 減少DOM渲染：ngFor加trackBy
使用*ngFor 的trackBy 屬性，Angular 只變更並重新渲染已變更的條目，而不必重新載入整個條目清單。
例如：表格排序場景。 ngFor如果加了trackBy，表格渲染的時候只會移動行dom元素，如果不加trackBy，會先刪除現有的表格dom元素，再新增行dom元素。顯然只移動dom元素效能會好很多。
2.3.2 模板表達式中不要使用函數
不要在Angular 模板表達式中使用函數調用，可以用管道pipe代替，也可以手動計算後用一個變數代替。模板中使用函數，不管值有沒有改變，每次變更偵測的時候都會執行函數，都會影響效能。 ###### 範本中使用函數的情境：###
2.3.3 減少ngFor的使用
使用ngFor，資料量大的時候會影響效能。
範例：
使用ngFor：
#不使用ngFor：效能提升10倍左右
更多程式相關知識，請造訪：程式設計影片！ ！
以上是angular如何進行效能優化？變更檢測方式淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
