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 被呼叫時，會通知

watcher

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

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

setTimeout

：

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);
  };
};

或###Promise.then###方法：###

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.js 在載入時，對所有非同步介面進行了封裝。因此所有在 Zone.js 中執行的非同步方法都會被當做為一個 Task 被其統一監管，並且提供了相應的鉤子函數（hooks），用來在非同步任務執行前後或某個階段做一些額外的操作。因此透過 Zone.js 可以很方便地實現記錄日誌、監控效能、控制非同步回呼執行的時機等功能。 ######而這些鉤子函數（hooks），可以透過###Zone.fork()###方法來進行設置，具體可以參考如下配置：###

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; // 通知任务队列的状态改变
}

###舉一個### onInvoke###的簡單列子：###

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)
  });
});

###最終執行結果：###############理解了Zone.js 的原理之後，透過走讀Angular 的源碼，可以知道Zone.js 在Angular 被用來實現只要有非同步方法或事件的調用，就會觸發變更偵測。大體如下：######首先，在###applicatoin_ref.ts### 檔案中，當###ApplicationRef### 建置時就訂閱了微任務佇列為空的回呼事件，其呼叫了# ##tick### 方法（即變更偵測）：############

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

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

##例如

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

另外Zone.js 中對於非同步任務總共分為三類：

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

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

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

其實如果站在瀏覽器的角度，

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

（1）主執行緒執行完後，會優先檢查微任務佇列是否還有任務需要執行

（2）第一次輪詢結束後，會檢查巨集任務佇列是否還有任務執行，執行完後檢查微任務清單是否還有任務執行，之後將重複這個過程

效能最佳化原理

#頁面效能的好壞，最直觀的判斷就是看頁面回應是否流暢、是否回應得快。而頁面回應其實是把頁面狀態的變更重新渲染到頁面上的過程，站在相對宏觀的視角來看， Angular 的變更偵測其實只是整個事件回應週期中的一環。使用者與頁面的所有互動都是透過事件來觸發，其整個響應過程大致如下：

#如果考慮優化頁面回應的速度，可以從各個階段入手：

（1）對於觸發事件階段，可以減少事件的觸發，來減少整體的變更偵測次數和重新渲染

（2）對於Event Handler 執行邏輯階段，可以透過最佳化複雜程式碼邏輯來減少執行時間

（3）對於Change Detection 檢測資料綁定並更新DOM 階段，可以減少變更偵測和模板資料的計算次數來減少渲染時間

（4）對於瀏覽器渲染階段，則可能需要考慮使用不同瀏覽器或從硬體配置上進行提升

對於第二、四階段的相關優化這裡不做過多討論，結合上面提到的Angular 對於異步任務的分類，針對第一、三階段的最佳化方式可以進一步明確：

（1）針對Macro task 合併請求，盡量減少tick 的次數

（2）針對Micro task 合併tick

（3）針對Event task 減少event 的觸發和註冊事件

（4）tick 分為check 和render 兩個階段，減少check 階段的計算以及不必要的渲染

前面有提到，大多数情况通过观察页面是否流畅可以判断页面的是否存在性能问题。虽然这种方式简单、直观，但也相对主观，并非是通过精确的数字反映页面的性能到底如何。换言之，我们需要用一个更加有效、精确的指标来衡量什么样的页面才是具备良好性能的。而 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 請求線程的並發數是有限制的，一旦超過了限制數，後面的請求都會被阻塞掛起
• 等等

小結

（1）簡單講解了Angular 是如何使用Zone .js 來實現變更檢測的

（2）在理解了Angular 的變更檢測的基礎上，進一步明確了 Angular 性能優化的原理以及判斷頁面是否具備良好的性能的標準

（3）針對性的提供了一些偏運行時的性能優化方案

更多編程相關知識，請訪問：

編程入門！ ！

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