站長資訊網(wǎng)Angular如何進(jìn)行優(yōu)化？下面本篇文章給大家了解一下Angular中的性能優(yōu)化，希望對大家有所幫助！
本文將談一談 Angular 的性能優(yōu)化，并且主要介紹與運(yùn)行時(shí)相關(guān)的優(yōu)化。在談如何優(yōu)化之前，首先我們需要明確什么樣的頁面是存在性能問題？好的性能的衡量指標(biāo)是什么？性能優(yōu)化背后的原理又是如何的？如果你對這些問題感興趣，那么就請繼續(xù)讀下去。【相關(guān)教程推薦：《angular教程》】
變更檢測機(jī)制
不同于網(wǎng)絡(luò)傳輸優(yōu)化，運(yùn)行時(shí)優(yōu)化更加關(guān)注于 Angular 的運(yùn)行機(jī)制以及如何編碼才能有效地避免性能問題（最佳實(shí)踐）。而要弄明白 Angular 的運(yùn)行機(jī)制，首先需要理解它的變更檢測機(jī)制（也被稱為臟檢查）——如何將狀態(tài)的變更重新渲染到視圖之中。而如何將組件狀態(tài)的變化反應(yīng)到視圖中，也是前端三大框架都需要解決的一個(gè)問題。不同框架的解決方案既有類似的思路也有各自的特色。
首先，Vue 和 React 都是采用虛擬 DOM 來實(shí)現(xiàn)視圖更新，不過具體實(shí)現(xiàn)上還是有所區(qū)別：
對于 React：
-
通過使用
setState或forceUpdate來觸發(fā)render方法更新視圖 -
父組件更新視圖時(shí)，也會判斷是否需要
re-render子組件
對于 Vue：
-
Vue 會遍歷
data對象的所有屬性，并使用Object.defineProperty把這些屬性全部轉(zhuǎn)為經(jīng)過包裝的getter和setter -
每個(gè)組件實(shí)例都有相應(yīng)的
watcher實(shí)例對象，它會在組件渲染的過程中把屬性記錄為依賴 -
當(dāng)依賴項(xiàng)的
setter被調(diào)用時(shí)，會通知watcher重新計(jì)算，從而使它關(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: 這里做了簡化，實(shí)際上 then 可以接受
