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 物件中。
偵測過程原理大概如下：
使用者操作觸發非同步事件（例如：dom事件，介面請求…）
=> ZoneTask類別處理事件。 invokeTask()函數中呼叫zone的runTask()方法，在runTask方法中，zone透過_zoneDelegate實例屬性，呼叫ZoneSpec的鉤子
=> ZoneSpec的三個鉤子（onInvokeTask、onInvoke、onHasTask）鉤子裡透過checkStable()函數觸發zone.onMicrotaskEmpty.emit(null)通知=> 根元件監聽onMicrotaskEmpty後呼叫tick()，tick方法中呼叫
#detect##從從根元件開始偵測=> ··· refreshView()呼叫executeTemplate()，executeTemplate方法中呼叫
更新範本、子元件綁定的值（
這時候會去偵測子元件的###@Input()###輸入引用是否改變，如果有改變，會將子元件標記為###Dirty###，也就是該子元件需要變更偵測###）######詳細變更偵測原理流程圖：###簡化流程：
觸發非同步事件
=> ZoneTask處理事件
=> 觸發非同步事件
=> ZoneTask處理事件
=> ZoneDelegate 呼叫ZoneSpec的鉤子觸發onMicrotaskEmpty通知
由上述程式碼可知，
當微任務為空的時候才會觸發變更偵測。
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()鉤子來手動觸發目前元件的變更偵測。
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中文網其他相關文章！
