使用 Angular CDK 將大型清單虛擬化

實作虛擬捲動功能,讓大型清單的回應速度更快。

Stephen Fluin
Stephen Fluin

捲動清單是目前最常見的 UI 模式之一,無論是在您喜愛的社群媒體網站上瀏覽無限捲動的動態消息,或是瀏覽企業資訊主頁,都會用到捲動清單。當捲動清單變得非常長 (數百、數千或數十萬個項目) 時,應用程式效能可能會受到影響。

由於應用程式必須先載入並轉譯所有資料,因此大型清單的載入速度可能較慢。由於清單中的每個項目可能含有豐富的資料、媒體和功能,因此轉譯和瀏覽的速度也可能較慢。

使用者在載入或捲動網頁時可能會遇到問題,導致他們感到不耐煩並放棄網頁。

虛擬捲動是解決這些縮放問題的主要技術。虛擬捲動功能會提供適當大小的捲動列,讓使用者有瀏覽大型清單的感受,並且能夠瀏覽清單,而不需要應用程式將整個清單保留在記憶體中,或在頁面上算繪清單。

在 Angular 中,虛擬捲動功能是由 元件開發套件 (CDK) 提供。只要修改列舉清單的方式,並提供幾個額外的設定參數,CDK 的虛擬捲動功能就會自動管理清單的虛擬轉譯,進而提升網頁效能和回應速度。

系統不會一次轉譯整個清單,而是只會轉譯可在螢幕上顯示的項目子集 (加上一個小緩衝區)。使用者瀏覽時,系統會計算及轉譯新的項目子集,並視需要重複使用現有的 DOM。

本篇文章的其餘部分將逐步說明如何設定基本虛擬捲動功能。您可以在這個範例應用程式中查看完整的工作範例:

設定虛擬捲動功能

首先,請確認您已使用偏好的套件管理工具安裝 @angular/cdk。如要使用 npm 安裝,請在終端機中執行下列指令:

npm install --save @angular/cdk

在應用程式中新增 ScrollingModule

安裝 CDK 後,請從 @angular/cdk/scrolling 套件匯入 ScrollingModule,以便處理虛擬捲動功能。然後將其加入模組的匯入陣列:

import {ScrollingModule} from '@angular/cdk/scrolling';

...
imports
: [
 
ScrollingModule
...
]
...

建立可視區域

如要瞭解套件運作方式,請嘗試建立元件,其中包含從 0 到 99,999 的簡單數字清單:

@Component({
  template
: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
  list
= Array.from({length: 100000}).map((_, i) => i);
}

瀏覽器算繪應用程式時,必須算繪 100,000 個個別 <div> 元素。這對簡單的文字節點來說或許沒什麼問題,但重複範本中的任何複雜性都無法順利擴充,而且任何事件監聽器都會大幅增加。

如要新增虛擬捲動功能並避免上述問題,您必須在 <cdk-virtual-scroll-viewport> 元素中包裝清單,藉此建立可視區域:

@Component({
 
template: `<cdk-virtual-scroll-viewport>
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`

})
export class ScrollComponent {
  list
= Array.from({length: 100000}).map((_, i) => i);
}

由於 ScrollingModule 會動態轉譯清單的子集,因此您必須透過標準 CSS 指定可視區域的高度。您也必須指定 itemSize,為視區提供內容提示。模組會利用這些資訊,判斷在特定時間點應保留多少項目,以及如何顯示適當大小的捲軸。

@Component({
 
template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`

})
export class ScrollComponent {
  list
= Array.from({length: 100000}).map((_, i) => i);
}

最後,將 *ngFor 轉換為 *cdkVirtualFor

@Component({
  template
: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
   
<div *cdkVirtualFor="let item of list">{{item}}</div>
   
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list
= Array.from({length: 100000}).map((_, i) => i);
}

檢視區不會逐一檢視整個清單,而是會動態識別並逐一檢視使用者清單的正確子集。如今,當使用者載入網頁時,CDK 應會轉譯適合顯示在畫面上的清單子集 (加上一點緩衝區),而檢視區中的任何捲動事件都會載入並轉譯清單的適當子集:

CDK 會在使用者捲動畫面時算繪清單的子集。

進一步

CDK 的虛擬捲動功能遠遠超出這個基本範例。在範例應用程式中,整個清單都位於記憶體中,但系統可視需要擷取清單,以便用於更複雜的應用程式。如要進一步瞭解 ScrollingModulecdkVirtualOf 指令的其他功能,請參閱 CDK 說明文件中的 Scrolling 相關資訊。

主頁橫幅圖片由 Mr Cup / Fabien Barral 提供,來源:Unsplash