再談Angular4 臟值檢測(cè)(性能優(yōu)化)
Summary
Angular 4的臟值檢測(cè)是個(gè)老話題了,而理解這個(gè)模型是做Angular性能優(yōu)化的基礎(chǔ)。因此,今天我們?cè)賮?lái)聊聊Angular 4臟值檢測(cè)的原理,并看看性能優(yōu)化的小提示。
進(jìn)入點(diǎn) - Zone.js
Angular 4是一個(gè)MVVM框架。數(shù)據(jù)模型(Model)轉(zhuǎn)換成視圖模型(ViewModel)后,綁定到視圖(View)上渲染成肉眼可見(jiàn)的頁(yè)面。因此,發(fā)現(xiàn)數(shù)據(jù)模型變化的時(shí)間點(diǎn)是更新頁(yè)面的關(guān)鍵,也是調(diào)用臟值檢測(cè)的關(guān)鍵。
經(jīng)過(guò)分析,工程師們發(fā)現(xiàn),數(shù)據(jù)的變化往往由macrotask和microtask等異步事件引起。因此,通過(guò)重寫瀏覽器所有的異步API,就能從源頭有效地監(jiān)聽(tīng)數(shù)據(jù)變化。Zone.js就是這樣一個(gè)猴子腳本(Monkey Patch)。Angular 4使用了一個(gè)定制化的Zone(NgZone),它會(huì)通知Angular可能有數(shù)據(jù)變化,需要更新視圖中的數(shù)據(jù)(臟值檢測(cè))。
臟值檢測(cè)(Change Detection)
臟值檢測(cè)的基本原理是存儲(chǔ)舊數(shù)值,并在進(jìn)行檢測(cè)時(shí),把當(dāng)前時(shí)刻的新值和舊值比對(duì)。若相等則沒(méi)有變化,反之則檢測(cè)到變化,需要更新視圖。
Angular 4把頁(yè)面切分成若干個(gè)Component(組件),組成一棵組件樹(shù)。進(jìn)入臟值檢測(cè)后,從根組件自頂向下進(jìn)行檢測(cè)。Angular有兩種策略:Default和OnPush。它們配置在組件上,決定臟值檢測(cè)過(guò)程中不同的行為。
Default - 缺省策略
ChangeDetectionStrategy.Default。它還意味著一旦發(fā)生可能有數(shù)據(jù)變化的事件,就總是檢測(cè)這個(gè)組件。
臟值檢測(cè)的操作基本上可以理解為以下幾步。1)更新子組件綁定的properties,2)調(diào)用子組件的NgDoCheck和NgOnChanges生命周期鉤子(Lifecycle hook),3)更新自己的DOM,4)對(duì)子組件臟值檢測(cè)。這是一個(gè)從根組件開(kāi)始的遞歸方程。
// This is not Angular code function changeDetection(component) { updateProperties(component.children); component.children.forEach(child => { child.NgDoCheck(); child.NgOnChanges(); }; updateDom(component); component.children.forEach(child => changeDetection(child)); }
我們開(kāi)發(fā)者會(huì)非常關(guān)注DOM更新的順序,以及調(diào)用NgDoCheck和NgOnChanges的順序??梢园l(fā)現(xiàn):
- DOM更新是深度優(yōu)先的
- NgDoCheck和NgOnChanges并不是(也不是深度優(yōu)先)
OnPush - 單次檢測(cè)策略
ChangeDetectionStrategy.OnPush。只在Input Properties變化(OnPush)時(shí)才檢測(cè)這個(gè)組件。因此當(dāng)Input不變時(shí),它只在初始化時(shí)檢測(cè),也叫單次檢測(cè)。它的其他行為和Default保持一致。
需要注意的是,OnPush只檢測(cè)Input的引用。Input對(duì)象的屬性變化并不會(huì)觸發(fā)當(dāng)前組件的臟值檢測(cè)。
雖然OnPush策略提高了性能,但也是Bug的高發(fā)地點(diǎn)。解決方案往往是將Input轉(zhuǎn)化成Immutable的形式,強(qiáng)制Input的引用改變。
Tips
數(shù)據(jù)綁定
Angular有3種合法的數(shù)據(jù)綁定方式,但它們的性能是不一樣的。
直接綁定數(shù)據(jù)
<ul> <li *ngFor="let item of arr"> <span>Name {{item.name}}</span> <span>Classes {{item.classes}}</span><!-- Binding a data directly. --> </li> </ul>
大多數(shù)情況下,這都是性能最好的方式。
綁定一個(gè)function調(diào)用結(jié)果
<ul> <li *ngFor="let item of arr"> <span>Name {{item.name}}</span> <span>Classes {{classes(item)}}</span><!-- Binding an attribute to a method. The classes would be called in every change detection cycle --> </li> </ul>
在每個(gè)臟值檢測(cè)過(guò)程中,classes方程都要被調(diào)用一遍。設(shè)想用戶正在滾動(dòng)頁(yè)面,多個(gè)macrotask產(chǎn)生,每個(gè)macrotask都至少進(jìn)行一次臟值檢測(cè)。如果沒(méi)有特殊需求,應(yīng)盡量避免這種使用方式。
綁定數(shù)據(jù)+pipe
<ul> <li *ngFor="let item of instructorList"> <span>Name {{item.name}}</span> <span>Classes {{item | classPipe}}</span><!-- Binding data with a pipe --> </li> </ul>
它和綁定function類似,每次臟值檢測(cè)classPipe都會(huì)被調(diào)用。不過(guò)Angular給pipe做了優(yōu)化,加了緩存,如果item和上次相等,則直接返回結(jié)果。
NgFor
多數(shù)情況下,NgFor應(yīng)該伴隨trackBy方程使用。否則,每次臟值檢測(cè)過(guò)程中,NgFor會(huì)把列表里每一項(xiàng)都執(zhí)行更新DOM操作。
@Component({ selector: 'my-app', template: ` <ul> <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li> </ul> <button (click)="getItems()">Refresh items</button> `, }) export class App { collection; constructor() { this.collection = [{id: 1}, {id: 2}, {id: 3}]; } getItems() { this.collection = this.getItemsFromServer(); } getItemsFromServer() { return [{id: 1}, {id: 2}, {id: 3}, {id: 4}]; } trackByFn(index, item) { return index; } }
Reference
- He who thinks change detection is depth-first and he who thinks it's breadth-first are both usually right
- Angular Runtime Performance Guide
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例
這篇文章主要介紹了angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Angular directive遞歸實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)代碼實(shí)例
本篇文章主要介紹了Angular directive遞歸實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)代碼實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解 (上)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來(lái)看看吧。2017-07-07AngularJS基礎(chǔ) ng-srcset 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-srcset 指令,這里對(duì)ng-srcset 指令做了詳細(xì)的資料整理,附有代碼示例,有需要的小伙伴可以參考下2016-08-08Angular?Ngrx?Store應(yīng)用程序狀態(tài)典型示例詳解
這篇文章主要為大家介紹了Angular?Ngrx?Store應(yīng)用程序狀態(tài)典型示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07使用Angular.js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能
在各大購(gòu)物網(wǎng)站大家都可以簡(jiǎn)單購(gòu)物車效果演示,下面通過(guò)本文給大家分享一段代碼關(guān)于使用Angular.js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能,需要的朋友可以參考下2016-11-11