站長資訊網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 可以接受
