Angular性能優化 - 再談Angular 4髒值檢測

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

• He who thinks change detection is depth-first and he who thinks it’s breadth-first are both usually right
• Angular Runtime Performance Guide

Photo by Ross Findon on Unsplash