首頁  >  文章  >  web前端  >  如何優化Angular程式碼

如何優化Angular程式碼

php中世界最好的语言
php中世界最好的语言原創
2018-06-05 15:46:591161瀏覽

這次帶給大家如何優化Angular程式碼,如何優化Angular程式碼的注意事項有哪些,以下就是實戰案例,一起來看一下。

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的順序。可以發現:

  1. DOM更新是深度優先的

  2. 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;
 }
}

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

如何操作將設定資料從程式碼中分離

web開發中怎樣偵測屬性

以上是如何優化Angular程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn