Angular效能優化 – 再談Angular 4髒值檢測

SuperChe發表於2019-03-01

Summary

Angular 4的髒值檢測是個老話題了,而理解這個模型是做Angular效能優化的基礎。因此,今天我們再來聊聊Angular 4髒值檢測的原理,並看看效能優化的小提示。

進入點 – Zone.js

Angular 4是一個MVVM框架。資料模型(Model)轉換成檢視模型(ViewModel)後,繫結到檢視(View)上渲染成肉眼可見的頁面。因此,發現資料模型變化的時間點是更新頁面的關鍵,也是呼叫髒值檢測的關鍵。

經過分析,工程師們發現,資料的變化往往由macrotask和microtask等非同步事件引起。因此,通過重寫瀏覽器所有的非同步API,就能從源頭有效地監聽資料變化。Zone.js就是這樣一個猴子指令碼(Monkey Patch)。Angular 4使用了一個定製化的Zone(NgZone),它會通知Angular可能有資料變化,需要更新檢視中的資料(髒值檢測)。

髒值檢測(Change Detection)

髒值檢測的基本原理是儲存舊數值,並在進行檢測時,把當前時刻的新值和舊值比對。若相等則沒有變化,反之則檢測到變化,需要更新檢視。

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

Default – 預設策略

ChangeDetectionStrategy.Default。它還意味著一旦發生可能有資料變化的事件,就總是檢測這個元件。

髒值檢測的操作基本上可以理解為以下幾步。1)更新子元件繫結的properties,2)呼叫子元件的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));
}
複製程式碼

我們開發者會非常關注DOM更新的順序,以及呼叫NgDoCheck和NgOnChanges的順序。可以發現:

  • DOM更新是深度優先的
  • NgDoCheck和NgOnChanges並不是(也不是深度優先)

OnPush – 單次檢測策略

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

需要注意的是,OnPush只檢測Input的引用。Input物件的屬性變化並不會觸發當前元件的髒值檢測。

雖然OnPush策略提高了效能,但也是Bug的高發地點。解決方案往往是將Input轉化成Immutable的形式,強制Input的引用改變。

Tips

資料繫結

Angular有3種合法的資料繫結方式,但它們的效能是不一樣的。

直接繫結資料

<ul>
  <li *ngFor="let item of arr">
    <span>Name {{item.name}}</span>
    <span>Classes {{item.classes}}</span><!-- Binding a data directly. -->
  </li>
</ul>
複製程式碼

大多數情況下,這都是效能最好的方式。

繫結一個function呼叫結果

<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方程都要被呼叫一遍。設想使用者正在滾動頁面,多個macrotask產生,每個macrotask都至少進行一次髒值檢測。如果沒有特殊需求,應儘量避免這種使用方式。

繫結資料+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都會被呼叫。不過Angular給pipe做了優化,加了快取,如果item和上次相等,則直接返回結果。

NgFor

多數情況下,NgFor應該伴隨trackBy方程使用。否則,每次髒值檢測過程中,NgFor會把列表裡每一項都執行更新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

Photo by Ross Findon on Unsplash

相關文章