จำลองรายการขนาดใหญ่ด้วย Angular CDK

ทําให้รายการขนาดใหญ่ตอบสนองได้ดีขึ้นด้วยการใช้การเลื่อนเสมือนจริง

Stephen Fluin
Stephen Fluin

รายการแบบเลื่อนเป็นหนึ่งในรูปแบบ UI ที่พบบ่อยที่สุดในปัจจุบัน ไม่ว่าจะเป็นการเรียกดูฟีดแบบเลื่อนไปเรื่อยๆ ในเว็บไซต์โซเชียลมีเดียที่คุณชื่นชอบ หรือไปยังส่วนต่างๆ ของหน้าแดชบอร์ดขององค์กร เมื่อรายการเลื่อนยาวมาก (หลายร้อย หลายพัน หรือหลายแสนรายการ) ประสิทธิภาพของแอปพลิเคชันอาจลดลง

รายการขนาดใหญ่อาจโหลดช้าเนื่องจากแอปพลิเคชันต้องโหลดและแสดงผลข้อมูลทั้งหมดตั้งแต่ต้น นอกจากนี้ การแสดงผลและการไปยังส่วนต่างๆ ของรายการอาจช้าเนื่องจากแต่ละรายการในรายการอาจมีข้อมูล สื่อ และฟังก์ชันการทำงานที่สมบูรณ์

ผู้ใช้อาจพบปัญหาเมื่อโหลดหรือเลื่อนหน้าเว็บ ซึ่งทําให้ผู้ใช้ไม่พอใจและออกจากหน้าเว็บ

การเลื่อนเสมือนจริงใน Angular ด้วย Component Dev Kit

การเลื่อนเสมือนเป็นเทคนิคหลักที่ใช้แก้ปัญหาการปรับขนาดเหล่านี้ การเลื่อนเสมือนจะให้ความรู้สึกเหมือนมีรายการขนาดใหญ่มาก โดยแสดงแถบเลื่อนขนาดที่เหมาะสม และความสามารถในการไปยังส่วนต่างๆ ของรายการโดยไม่ต้องให้แอปพลิเคชันเก็บรายการทั้งหมดไว้ในหน่วยความจำหรือแสดงผลในหน้าเว็บ

ใน Angular นั้น Component Dev Kit (CDK) จะเป็นผู้จัดหาการเลื่อนเสมือนจริง การแก้ไขวิธีวนซ้ำรายการและระบุพารามิเตอร์การกําหนดค่าเพิ่มเติม 2-3 รายการจะทำให้การเลื่อนเสมือนของ CDK จัดการการแสดงผลเสมือนของรายการโดยอัตโนมัติ ซึ่งจะปรับปรุงประสิทธิภาพและการตอบสนองของหน้าเว็บ

ระบบจะแสดงผลเฉพาะรายการย่อยที่พอดีกับหน้าจอ (บวกบัฟเฟอร์ขนาดเล็ก) แทนที่จะแสดงผลทั้งรายการพร้อมกัน ขณะที่ผู้ใช้ไปยังส่วนต่างๆ ระบบจะคำนวณและแสดงผลชุดย่อยใหม่ของรายการ โดยนํา DOM ที่มีอยู่มาใช้ซ้ำหากต้องการ

ส่วนที่เหลือของโพสต์นี้จะอธิบายวิธีตั้งค่าการเลื่อนเสมือนพื้นฐาน คุณดูตัวอย่างการทำงานทั้งหมดได้ในแอปตัวอย่างนี้

การตั้งค่าการเลื่อนเสมือน

ก่อนอื่นให้ตรวจสอบว่าคุณได้ติดตั้ง @angular/cdk โดยใช้โปรแกรมจัดการแพ็กเกจที่คุณชอบ หากต้องการติดตั้งโดยใช้ npm ให้เรียกใช้คําสั่งนี้ในเทอร์มินัล

npm install --save @angular/cdk

เพิ่ม ScrollingModule ลงในแอป

เมื่อติดตั้ง CDK แล้ว ให้นําเข้า ScrollingModule ซึ่งจัดการการเลื่อนเสมือนจริงจากแพ็กเกจ @angular/cdk/scrolling จากนั้นเพิ่มลงในอาร์เรย์การนําเข้าของโมดูล

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

เมื่อเบราว์เซอร์แสดงผลแอป จะต้องแสดงผลองค์ประกอบ <div> แต่ละรายการ 100,000 รายการ วิธีนี้อาจใช้ได้กับโหนดข้อความธรรมดา แต่ความซับซ้อนของเทมเพลตที่ซ้ำกันจะปรับขนาดได้ไม่ดี และ Listener เหตุการณ์จะเพิ่มขึ้นอย่างมาก

หากต้องการเพิ่มการเลื่อนเสมือนและหลีกเลี่ยงปัญหาเหล่านั้น คุณต้องสร้างวิวพอร์ตโดยตัดรายการในองค์ประกอบ <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 โมดูลใช้ข้อมูลนี้เพื่อกำหนดจำนวนรายการที่จะเก็บไว้ใน DOM ณ เวลาหนึ่งๆ และวิธีแสดงผลแถบเลื่อนขนาดที่เหมาะสม

@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 แสดงผลชุดย่อยของรายการขณะที่ผู้ใช้เลื่อน

การดำเนินการเพิ่มเติม

ความสามารถของ Virtual Scroll ของ CDK นั้นทำได้มากกว่าตัวอย่างพื้นฐานนี้ ในแอปตัวอย่าง รายการทั้งหมดอยู่ในหน่วยความจํา แต่ระบบจะดึงข้อมูลรายการตามคําขอสําหรับแอปพลิเคชันที่ซับซ้อนมากขึ้นได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถอื่นๆ ของ ScrollingModule และคำสั่ง cdkVirtualOf ได้โดยอ่านเกี่ยวกับ Scrolling ในเอกสารประกอบ CDK

รูปภาพหลักโดย Mr Cup / Fabien Barral ใน Unsplash