欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

再談Angular4 臟值檢測(性能優(yōu)化)

 更新時間:2018年04月23日 13:57:37   作者:SuperChe  
這篇文章主要介紹了再談Angular4 臟值檢測(性能優(yōu)化),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

Summary

Angular 4的臟值檢測是個老話題了,而理解這個模型是做Angular性能優(yōu)化的基礎(chǔ)。因此,今天我們再來聊聊Angular 4臟值檢測的原理,并看看性能優(yōu)化的小提示。

進入點 - Zone.js

Angular 4是一個MVVM框架。數(shù)據(jù)模型(Model)轉(zhuǎn)換成視圖模型(ViewModel)后,綁定到視圖(View)上渲染成肉眼可見的頁面。因此,發(fā)現(xiàn)數(shù)據(jù)模型變化的時間點是更新頁面的關(guān)鍵,也是調(diào)用臟值檢測的關(guān)鍵。

經(jīng)過分析,工程師們發(fā)現(xiàn),數(shù)據(jù)的變化往往由macrotask和microtask等異步事件引起。因此,通過重寫瀏覽器所有的異步API,就能從源頭有效地監(jiān)聽數(shù)據(jù)變化。Zone.js就是這樣一個猴子腳本(Monkey Patch)。Angular 4使用了一個定制化的Zone(NgZone),它會通知Angular可能有數(shù)據(jù)變化,需要更新視圖中的數(shù)據(jù)(臟值檢測)。

臟值檢測(Change Detection)

臟值檢測的基本原理是存儲舊數(shù)值,并在進行檢測時,把當(dāng)前時刻的新值和舊值比對。若相等則沒有變化,反之則檢測到變化,需要更新視圖。

Angular 4把頁面切分成若干個Component(組件),組成一棵組件樹。進入臟值檢測后,從根組件自頂向下進行檢測。Angular有兩種策略:Default和OnPush。它們配置在組件上,決定臟值檢測過程中不同的行為。

Default - 缺省策略

ChangeDetectionStrategy.Default。它還意味著一旦發(fā)生可能有數(shù)據(jù)變化的事件,就總是檢測這個組件。

臟值檢測的操作基本上可以理解為以下幾步。1)更新子組件綁定的properties,2)調(diào)用子組件的NgDoCheck和NgOnChanges生命周期鉤子(Lifecycle hook),3)更新自己的DOM,4)對子組件臟值檢測。這是一個從根組件開始的遞歸方程。

// 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));
}

我們開發(fā)者會非常關(guān)注DOM更新的順序,以及調(diào)用NgDoCheck和NgOnChanges的順序??梢园l(fā)現(xiàn):

  1. DOM更新是深度優(yōu)先的
  2. NgDoCheck和NgOnChanges并不是(也不是深度優(yōu)先)

OnPush - 單次檢測策略

ChangeDetectionStrategy.OnPush。只在Input Properties變化(OnPush)時才檢測這個組件。因此當(dāng)Input不變時,它只在初始化時檢測,也叫單次檢測。它的其他行為和Default保持一致。

需要注意的是,OnPush只檢測Input的引用。Input對象的屬性變化并不會觸發(fā)當(dāng)前組件的臟值檢測。

雖然OnPush策略提高了性能,但也是Bug的高發(fā)地點。解決方案往往是將Input轉(zhuǎn)化成Immutable的形式,強制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ù)情況下,這都是性能最好的方式。

綁定一個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>

在每個臟值檢測過程中,classes方程都要被調(diào)用一遍。設(shè)想用戶正在滾動頁面,多個macrotask產(chǎn)生,每個macrotask都至少進行一次臟值檢測。如果沒有特殊需求,應(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類似,每次臟值檢測classPipe都會被調(diào)用。不過Angular給pipe做了優(yōu)化,加了緩存,如果item和上次相等,則直接返回結(jié)果。

NgFor

多數(shù)情況下,NgFor應(yīng)該伴隨trackBy方程使用。否則,每次臟值檢測過程中,NgFor會把列表里每一項都執(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

  1. He who thinks change detection is depth-first and he who thinks it's breadth-first are both usually right
  2. Angular Runtime Performance Guide

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論