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

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

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

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