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

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

變更檢測(cè)機(jī)制

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

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

對(duì)于 React：

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

• 父組件更新視圖時(shí)，也會(huì)判斷是否需要 re-render 子組件

對(duì)于 Vue：

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

• 每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象，它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴(lài)

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

而 Angular 則是通過(guò)引入 Zone.js 對(duì)異步操作的 API 打補(bǔ)丁，監(jiān)聽(tīng)其觸發(fā)來(lái)進(jìn)行變更檢測(cè)。關(guān)于 Zone.js 的原理在之前的一篇文章中有詳細(xì)的介紹。簡(jiǎn)單來(lái)說(shuō)，Zone.js 通過(guò) Monkey patch （猴補(bǔ)?。┑姆绞剑┝Φ貙g覽器或 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: 這里做了簡(jiǎn)化，實(shí)際上 then 可以接受