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

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

變更檢測機(jī)制

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

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

對于 React：

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

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

對于 Vue：

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

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

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

而 Angular 則是通過引入 Zone.js 對異步操作的 API 打補(bǔ)丁，監(jiān)聽其觸發(fā)來進(jìn)行變更檢測。關(guān)于 Zone.js 的原理在之前的一篇文章中有詳細(xì)的介紹。簡單來說，Zone.js 通過 Monkey patch （猴補(bǔ)?。┑姆绞?，暴力地將瀏覽器或 Node 中的所有異步 API 進(jìn)行了封裝替換。

比如瀏覽器中的 setTimeout：

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

或者 Promise.then方法：

let originalPromiseThen = Promise.prototype.then;  // NOTE: 這里做了簡化，實際上 then 可以接受