Angular如何進行最佳化？以下這篇文章給大家了解一下Angular中的效能優化，希望對大家有幫助！
本文將談一談 Angular 的效能最佳化，並且主要介紹與執行時間相關的最佳化。在談如何優化之前，首先我們需要先明確什麼樣的頁面是存在效能問題？好的性能的衡量指標是什麼？效能優化背後的原理又是如何的？如果你對這些問題有興趣，那就請繼續讀下去。 【相關教學推薦：《angular教學》】
變更偵測機制
不同於網路傳輸優化，運行時優化更專注於Angular 的運作機制以及如何編碼才能有效地避免效能問題（最佳實踐）。而要弄清楚 Angular 的運作機制，首先需要理解它的變更偵測機制（也稱為髒檢查）——如何將狀態的變更重新渲染到視圖之中。而如何將元件狀態的變化反應到視圖中，也是前端三大框架都需要解決的問題。不同框架的解決方案既有類似的思路也有各自的特色。
首先，Vue 和React 都是採用虛擬DOM 來實作視圖更新，但具體實作上還是有所區別：
對於React：
#透過使用setState 或
方法更新檢視##父元件更新視圖時，也會判斷是否需要re-render
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 都可以理解成是巨集任務或微任務中的一種，而它們的執行順序在先前的一篇文章中有詳細分析，簡單來說：
（1）主執行緒執行完後，會優先檢查微任務佇列是否還有任務需要執行（2）第一次輪詢結束後，會檢查巨集任務佇列是否還有任務執行，執行完後檢查微任務清單是否還有任務執行，之後將重複這個過程效能最佳化原理
#頁面效能的好壞，最直觀的判斷就是看頁面回應是否流暢、是否回應得快。而頁面回應其實是把頁面狀態的變更重新渲染到頁面上的過程，站在相對宏觀的視角來看， Angular 的變更偵測其實只是整個事件回應週期中的一環。使用者與頁面的所有互動都是透過事件來觸發，其整個響應過程大致如下：前面有提到，大多数情况通过观察页面是否流畅可以判断页面的是否存在性能问题。虽然这种方式简单、直观，但也相对主观，并非是通过精确的数字反映页面的性能到底如何。换言之，我们需要用一个更加有效、精确的指标来衡量什么样的页面才是具备良好性能的。而 Angular 官方也提供了相应的方案，可以通过开启 Angular 的调试工具，来实现对变更检测循环（完成的 tick）的时长监控。
首先，需要使用 Angular 提供的 enableDebugTools 方法，如下：
之后只需要在浏览器的控制台中输入 ng.profiler.timeChangeDetection() ，即可看到当前页面的平均变更检测时间：
从上面可以看出，执行了 692 次变更检测循环（完整的事件响应周期）的平均时间为 0.72 毫秒。如果多运行几次，你会发现每次运行的总次数是不一样、随机的。
官方提供了这样一个判断标准：理想情况下，分析器打印出的时长（单次变更检测循环的时间）应该远低于单个动画帧的时间（16 毫秒）。一般这个时长保持在 3 毫秒下，则说明当前页面的变更检测循环的性能是比较好的。如果超过了这个时长，则就可以结合 Angular 的变更检测机制分析一下是否存在重复的模板计算和变更检测。
性能优化方案
在理解 Angular 优化原理的基础上，我们就可以更有针对性地去进行相应的性能优化：
（1）针对异步任务 ——减少变更检测的次数
（2）针对 Event Task —— 减少变更检测的次数
如上图，防抖动处理只是保证了代码逻辑不会重复运行，但是 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）针对组件 ——减少不必要的变更检测
@Component({
...
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class XXXComponent {
....
}在 Angular 中 显示的设置 @Component 的 changeDetection 为 ChangeDetectionStrategy.OnPush 即开启 onPush 模式（默认不开启），用 OnPush 可以跳过某个组件或者某个父组件以及它下面所有子组件的变化检测，如下所示：
（5）针对模板 ——减少不必要的计算和渲染
##（6）其他編碼最佳化建議
小結
（1）簡單講解了Angular 是如何使用Zone .js 來實現變更檢測的（2）在理解了Angular 的變更檢測的基礎上，進一步明確了 Angular 性能優化的原理以及判斷頁面是否具備良好的性能的標準（3）針對性的提供了一些偏運行時的性能優化方案更多編程相關知識，請訪問：編程入門！ ！
以上是Angular如何進行最佳化？效能最佳化方案淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
