Angular如何進行最佳化？效能最佳化方案淺析

Angular如何進行最佳化？以下這篇文章給大家了解一下Angular中的效能優化，希望對大家有幫助！

本文將談一談 Angular 的效能最佳化，並且主要介紹與執行時間相關的最佳化。在談如何優化之前，首先我們需要先明確什麼樣的頁面是存在效能問題？好的性能的衡量指標是什麼？效能優化背後的原理又是如何的？如果你對這些問題有興趣，那就請繼續讀下去。 【相關教學推薦：《angular教學》】

變更偵測機制

不同於網路傳輸優化，運行時優化更專注於Angular 的運作機制以及如何編碼才能有效地避免效能問題（最佳實踐）。而要弄清楚 Angular 的運作機制，首先需要理解它的變更偵測機制（也稱為髒檢查）——如何將狀態的變更重新渲染到視圖之中。而如何將元件狀態的變化反應到視圖中，也是前端三大框架都需要解決的問題。不同框架的解決方案既有類似的思路也有各自的特色。

首先，Vue 和React 都是採用虛擬DOM 來實作視圖更新，但具體實作上還是有所區別：

對於React：

• #透過使用setState或

  forceUpdate
來觸發
• render

  方法更新檢視##父元件更新視圖時，也會判斷是否需要re-render

  子元件

對Vue：

Vue 會遍歷data

Object.defineProperty把這些屬性全部轉為經過包裝的getter

setter

watcher實例對象，它會在元件渲染的過程中把屬性記錄為依賴

setter被呼叫時，會通知

重新計算，從而使它關聯的元件得以更新

而Angular 則是透過引入 Zone .js 對非同步操作的API 打補丁，監聽其觸發來進行變更偵測。關於 Zone.js 的原理在先前的一篇文章中有詳細的介紹。簡單來說，Zone.js 透過 Monkey patch （猴子補丁）的方式，暴力地將瀏覽器或 Node 中的所有非同步 API 進行了封裝替換。例如瀏覽器中的

：

let originalSetTimeout = window.setTimeout; window.setTimeout = function(callback, delay) { return originalSetTimeout(Zone.current.wrap(callback), delay); } Zone.prototype.wrap = function(callback) { // 获取当前的 Zone let capturedZone = this; return function() { return capturedZone.runGuarded(callback, this, arguments); }; };

let originalPromiseThen = Promise.prototype.then; // NOTE: 这里做了简化，实际上 then 可以接受更多参数 Promise.prototype.then = function(callback) { // 获取当前的 Zone let capturedZone = Zone.current; function wrappedCallback() { return capturedZone.run(callback, this, arguments); }; // 触发原来的回调在 capturedZone 中 return originalPromiseThen.call(this, [wrappedCallback]); };

Zone.current.fork(zoneSpec) // zoneSpec 的类型是 ZoneSpec // 只有 name 是必选项，其他可选 interface ZoneSpec { name: string; // zone 的名称，一般用于调试 Zones 时使用 properties?: { [key: string]: any; } ; // zone 可以附加的一些数据，通过 Zone.get('key') 可以获取 onFork: Function; // 当 zone 被 forked，触发该函数 onIntercept?: Function; // 对所有回调进行拦截 onInvoke?: Function; // 当回调被调用时，触发该函数 onHandleError?: Function; // 对异常进行统一处理 onScheduleTask?: Function; // 当任务进行调度时，触发该函数 onInvokeTask?: Function; // 当触发任务执行时，触发该函数 onCancelTask?: Function; // 当任务被取消时，触发该函数 onHasTask?: Function; // 通知任务队列的状态改变 }

let logZone = Zone.current.fork({ name: 'logZone', onInvoke: function(parentZoneDelegate, currentZone, targetZone, delegate, applyThis, applyArgs, source) { console.log(targetZone.name, 'enter'); parentZoneDelegate.invoke(targetZone, delegate, applyThis, applyArgs, source) console.log(targetZone.name, 'leave'); } }); logZone.run(function myApp() { console.log(Zone.current.name, 'queue promise'); Promise.resolve('OK').then((value) => {console.log(Zone.current.name, 'Promise', value) }); });

其次，在checkStable方法中，會判斷當微任務佇列清空時觸發onMicrotaskEmpty事件（結合上來看，等價於會觸發變更偵測）：

最後，能夠觸發checkStable方法的呼叫的地方分別在Zone.js 的三個鉤子函數中，分別是onInvoke、onInvokeTask和onHasTask：

onHasTask——偵測到有或無ZoneTask時觸發的鉤子：

Micro Task（微任務）：由Promise等創建，native的Promise是在當前事件循環結束前就要執行的，而打過補丁的Promise也會在事件循環結束前執行。

Macro Task （巨集任務）：由setTimeout等創建，native的setTimeout會在未來某個時間被處理。

Event Task ：由addEventListener等創建，這些task可能被觸發多次，也可能一直不會被觸發。

Event Task其實可以看做是宏任務，換句話說，所有事件或非同步API 都可以理解成是巨集任務或微任務中的一種，而它們的執行順序在先前的一篇文章中有詳細分析，簡單來說：

效能最佳化原理

前面有提到，大多数情况通过观察页面是否流畅可以判断页面的是否存在性能问题。虽然这种方式简单、直观，但也相对主观，并非是通过精确的数字反映页面的性能到底如何。换言之，我们需要用一个更加有效、精确的指标来衡量什么样的页面才是具备良好性能的。而 Angular 官方也提供了相应的方案，可以通过开启 Angular 的调试工具，来实现对变更检测循环（完成的tick）的时长监控。

首先，需要使用 Angular 提供的enableDebugTools方法，如下：

之后只需要在浏览器的控制台中输入ng.profiler.timeChangeDetection()，即可看到当前页面的平均变更检测时间：

从上面可以看出，执行了 692 次变更检测循环（完整的事件响应周期）的平均时间为 0.72 毫秒。如果多运行几次，你会发现每次运行的总次数是不一样、随机的。

官方提供了这样一个判断标准：理想情况下，分析器打印出的时长（单次变更检测循环的时间）应该远低于单个动画帧的时间（16 毫秒）。一般这个时长保持在 3 毫秒下，则说明当前页面的变更检测循环的性能是比较好的。如果超过了这个时长，则就可以结合 Angular 的变更检测机制分析一下是否存在重复的模板计算和变更检测。

性能优化方案

在理解 Angular 优化原理的基础上，我们就可以更有针对性地去进行相应的性能优化：

（1）针对异步任务 ——减少变更检测的次数

• 使用 NgZone 的 runOutsideAngular 方法执行异步接口
• 手动触发 Angular 的变更检测

（2）针对 Event Task —— 减少变更检测的次数

• 将 input 之类的事件换成触发频率更低的事件
• 对 input valueChanges 事件做的防抖动处理，并不能减少变更检测的次数

如上图，防抖动处理只是保证了代码逻辑不会重复运行，但是 valueChanges 的事件却随着 value 的改变而触发（改变几次，就触发几次），而只要有事件触发就会相应触发变更检测。

（3）使用 Pipe ——减少变更检测中的计算次数

• 将 pipe 定义为 pure pipe（@Pipe默认是 pure pipe，因此也可以不用显示地设置pure: true）

  import { Piep, PipeTransform } from '@angular/core'; @Pipe({ name: 'gender', pure, }) export class GenderPiep implements PipeTransform { transform(value: string): string { if (value === 'M') return '男'; if (value === 'W') return '女'; return ''; } }

  登入後複製

关于 Pure/ImPure Pipe：

• Pure Pipe：如果传入 Pipe 的参数没有改变，则会直接返回之前一次的计算结果

• ImPure Pipe：每一次变更检测都会重新运行 Pipe 内部的逻辑并返回结果。（简单来说， ImPure Pipe 就等价于普通的 formattedFunction，如果一个页面触发了多次的变更检测，那么 ImPure Pipe 的逻辑就会执行多次）

（4）针对组件 ——减少不必要的变更检测

• 组件使用 onPush 模式
  • 只有输入属性发生变化时，该组件才会检测
  • 只有该组件或者其子组件中的 DOM 事件触发时，才会触发检测
  • 非 DOM 事件的其他异步事件，只能手动触发检测
  • 声明了 onPush 的子组件，如果输入属性未变化，就不会去做计算和更新

@Component({ ... changeDetection: ChangeDetectionStrategy.OnPush, }) export class XXXComponent { .... }

在 Angular 中 显示的设置@Component的changeDetection为ChangeDetectionStrategy.OnPush即开启 onPush 模式（默认不开启），用 OnPush 可以跳过某个组件或者某个父组件以及它下面所有子组件的变化检测，如下所示：

（5）针对模板 ——减少不必要的计算和渲染

• 清單的循環渲染使用trackBy
• 盡量使用快取值，避免使用方法呼叫和get 屬性的呼叫
• 範本中如果確實有需要呼叫函數的地方，且是多處呼叫可以使用模板快取
• ngIf 控制元件的展示，放到呼叫元件的地方控制

##（6）其他編碼最佳化建議

不要使用try/catch 來做流程控制，其會造成很大的時間消耗（記錄大量堆疊資訊等）
• 過多的動畫會導致頁面載入卡頓
• 長列表可以使用虛擬滾動
• 針對preload module 盡量延遲load， 因為瀏覽器的http 請求線程的並發數是有限制的，一旦超過了限制數，後面的請求都會被阻塞掛起
• 等等

小結

編程入門！ ！

以上是Angular如何進行最佳化？效能最佳化方案淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！