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