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 面板，我們可以很方便的對當前頁面的流暢度進行監控

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的監聽事件。比如document上的click、mouseup、mousemove…等監聽事件。

監聽事件場景：

Renderer2.listen(document, …)

fromEvent(document,…)

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)通知

=> 根組件監聽onMicrotaskEmpty后調用tick()，tick方法中調用 detectChanges()從根組件開始檢測

=> ··· refreshView()調用executeTemplate()，executeTemplate方法中調用templateFn()更新模板、子組件綁定的值（這時候會去檢測子組件的@Input()輸入引用是否改變，如果有改變，會將子組件標記為Dirty，也就是該子組件需要變更檢測）

詳細變更檢測原理流程圖：

簡化流程：

觸發異步事件

=> 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事件不會觸發變更檢測

通過dom.addEventListener()原生監聽方式也不會觸發變更檢測

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倍左右