Angular如何進行優(yōu)化？下面本篇文章給大家了解一下Angular中的性能優(yōu)化，希望對大家有所幫助！

本文將談一談 Angular 的性能優(yōu)化，并且主要介紹與運行時相關的優(yōu)化。在談如何優(yōu)化之前，首先我們需要明確什么樣的頁面是存在性能問題？好的性能的衡量指標是什么？性能優(yōu)化背后的原理又是如何的？如果你對這些問題感興趣，那么就請繼續(xù)讀下去?！鞠嚓P教程推薦：《angular教程》】

變更檢測機制

不同于網絡傳輸優(yōu)化，運行時優(yōu)化更加關注于 Angular 的運行機制以及如何編碼才能有效地避免性能問題（最佳實踐）。而要弄明白 Angular 的運行機制，首先需要理解它的變更檢測機制（也被稱為臟檢查）——如何將狀態(tài)的變更重新渲染到視圖之中。而如何將組件狀態(tài)的變化反應到視圖中，也是前端三大框架都需要解決的一個問題。不同框架的解決方案既有類似的思路也有各自的特色。

首先，Vue 和 React 都是采用虛擬 DOM 來實現(xiàn)視圖更新，不過具體實現(xiàn)上還是有所區(qū)別：

對于 React：

• 通過使用 setState 或 forceUpdate 來觸發(fā) render 方法更新視圖

• 父組件更新視圖時，也會判斷是否需要 re-render 子組件

對于 Vue：

• Vue 會遍歷 data 對象的所有屬性，并使用 Object.defineProperty 把這些屬性全部轉為經過包裝的 getter 和 setter

• 每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴

• 當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而使它關聯(lián)的組件得以更新

而 Angular 則是通過引入 Zone.js 對異步操作的 API 打補丁，監(jiān)聽其觸發(fā)來進行變更檢測。關于 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 可以接受